Question

我有一个角度服务，可管理应用程序的身份验证。还有一个控制器。

当用户登录并注销时，

服务会在$rootScope上触发偶数。

我想在我的用户界面中更新DOM元素，因此它会显示“登录”＆＃39;或者＆＃39;退出＆＃39;取决于用户状态。

请注意，我的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中，这导致错误，说申请已在进行中。

如何更新活动的用户界面？是否有更好/更标准的方法来实现同样的目标？

提前致谢

Answer 1

您的代码运行正常。这是一个掠夺者：http://plnkr.co/edit/BUOAUgOe1y3e6S2Dq6dW?p=preview

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

来自事件的角度更新范围

1 个答案: