2

アプリへの認証を管理するAngularサービスがあります。そしてコントローラー。

サービスは$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 を更新するにはどうすればよいですか? 同じことを達成するためのより良い/より標準的な方法はありますか?

前もって感謝します

4

1 に答える 1

3

あなたのコードは問題なく動作します。ここにプランカーがあります: http://plnkr.co/edit/BUOAUgOe1y3e6S2Dq6dW?p=preview

しかし、UI の変更を通知するために $brodcast を使用することはありません。グローバル変数でグローバル名前空間を汚染するようなものです。Service を渡し、そのサービスの変更をリッスンすることをお勧めします。私が何を意味するかを示すためにプランカーを作成しました: http://plnkr.co/edit/MCWThc1ZtaAxmZSTirT6?p=preview

于 2013-10-27T13:56:11.500 に答える