javascript - 来自事件的 Angular 更新范围

Question

我有一个 Angular 服务来管理应用程序的身份验证。和一个 Controller 。

当用户登录和注销时，服务甚至会在 $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*/
});

在我的 Controller 中

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 更新没有反射(reflect)在 UI 中。我尝试将它包装在 $scope.$apply 中，这导致错误提示 apply is already in progress.

如何根据事件更新 UI？有没有更好/更标准的方法来实现同样的目标？

提前致谢

Answer 1

您的代码运行良好。这是一个笨蛋:http://plnkr.co/edit/BUOAUgOe1y3e6S2Dq6dW?p=preview

但我不会使用 $brodcast 来通知 ui 更改。这就像用全局变量污染你的全局命名空间。我建议传入一个服务并监听该服务的变化。我创建了一个 plunker 来向您展示我的意思: http://plnkr.co/edit/MCWThc1ZtaAxmZSTirT6?p=preview