事件的角度更新范圍

Question

我有一個角度服務，用於管理應用程序的身份驗證。 和一個控制器。

用戶登錄和注銷時，服務會在$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
};

問題是，盡管$ scope更新未反映在UI中，但console.log(...)工作正常。 我嘗試將其包裝在$scope.$apply ，導致出現錯誤，指出apply已在進行中。

如何從事件更新UI？ 是否有更好/更標准的方法來實現相同目標？

提前致謝

Answer 1

您的代碼運行正常。 這是一個小矮人： http ://plnkr.co/edit/BUOAUgOe1y3e6S2Dq6dW?p=preview

但是我不會使用$ brodcast來通知ui更改。 這就像用全局變量污染全局名稱空間。 我建議傳遞服務，並監聽該服務的更改。 我創建了一個插件來向您展示我的意思： http ://plnkr.co/edit/MCWThc1ZtaAxmZSTirT6?p=preview