【发布时间】：2013-10-28 02:32:09
【问题描述】：
我有一个管理应用程序身份验证的角度服务。还有一个控制器。
当用户登录和注销时，服务会在$rootScope 上触发偶数。
我想更新 UI 中的 DOM 元素，因此它会根据用户状态显示“登录”或“注销”。
请注意，我的 Angular 知识，尤其是在事件方面的知识不是很好，所以请随时给我关于最佳实践的建议。
这是我当前的代码。
app.service('AuthenticationService', function ($rootScope) {
var _loggedIn = "false";
this.login = function (email, password) {
if (!email || !password) return 1;
else {
_loggedIn = "true";
// broadcast on root scope, so anyone can listen
$rootScope.$broadcast("loginChanged", 1);
return 0;
}
};
this.logout = function (email, password) {
_loggedIn = "false";
// broadcast on root scope, so anyone can listen
$rootScope.$broadcast("loginChanged", 0);
}
/*other functions ommited*/
});
在我的控制器中
var addListener = function () {
listener = $scope.$on("loginChanged", function (e, loggedIn) {
$scope.loginButton.text = loggedIn ? "Log Out" : "Log In";
$scope.loginButton.link = loggedIn ? "#/logout" : "#/login";
console.log("loginChanged: " + loggedIn);
}); // $on returns a registration function for the listener
};
问题是 console.log(...) 工作正常，尽管 $scope 更新未反映在 UI 中。我尝试将其包装在 $scope.$apply 中，这导致错误提示应用已在进行中。
如何从事件更新 UI？有没有更好/更标准的方法来达到同样的效果？
提前致谢
【问题讨论】：
-
提供复制问题的演示。听起来可能有一些嵌套可能导致范围继承问题。没有标记很难提供帮助。如果日志正常工作...问题在别处
-
显示您如何在 HTML 中集成
loginButton变量 -
登录按钮是 HTML 格式的
<a href="{{loginButton.link}}">{{loginButton.text}}</a>
标签： javascript angularjs angularjs-scope