2013-10-27 109 views
2

我有一個角度的服務,管理認證到應用程序。還有一個控制器。角度更新範圍從事件

服務在用戶登錄和註銷時甚至在$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(...)工作正常,雖然$範圍更新未在UI反映。我試圖將其包裝在$scope.$apply中,這在導致錯誤中表示應用已在進行中。

如何從事件更新UI?有沒有更好的/更標準的方法來實現相同?

在前感謝

+0

提供演示覆制問題。聽起來像可能有一些嵌套,可能會導致範圍繼承問題。沒有標記很難提供幫助。如果日誌正在工作......問題在其他地方 – charlietfl

+0

顯示如何在HTML中嵌入'loginButton'變量 – Chandermani

+0

登錄按鈕爲HTML格式,因爲此爲 '' – Madushan

回答

3

你的代碼工作正常。這裏是一個plunker:http://plnkr.co/edit/BUOAUgOe1y3e6S2Dq6dW?p=preview

但我不會使用$ brodcast通知ui更改。這就像使用全局變量來處理全局名稱空間一樣。我會建議通過服務並聽取有關該服務的更改。我已經創建了一個蹦牀來向你展示我的意思: http://plnkr.co/edit/MCWThc1ZtaAxmZSTirT6?p=preview

+0

將'_loggedIn'與數據參數'loggedIn'相混淆廣播「似乎是數字 – charlietfl

+0

你是對的。通過對源代碼進行重構以使其不使用$ broadcast並回想錯誤是什麼不起作用,讓我感到困惑。將更新我的答案。 Ty – bekite

+0

使用$ broadcast的開銷少於$ watch – charlietfl