监视属性的Angular指令

Question

I like to write a small Angular directive that hide or show an element if the user is logged in. The authentication factory that I inject, basically reads and writes values to a cookie. The problem is, that "scope.$watch(authentication.isAuthenticated" is called just once. If "isAuthenticated" changes, the event/watcher will not be called.

app.directive('IfUserIsLoggedin', ["authentication", function (authentication) {  
return {
    restrict: 'A',
    link: function (scope, element, attrs) {

        function setClass() {
            if (element !== undefined) {
                if (authentication.isAuthenticated) {
                    element.removeClass("hidden");
                } else {
                    element.addClass("hidden");
                }
            }
        }

        scope.$watch(authentication.isAuthenticated, function () {
            setClass();
        });

        setClass();
    }
};}]);

I used this sample from the Angular documention for my code.

Answer 1

The reason your code doesn't wok is because the value you're watching is not on the scope. Either add it to the scope, or use a different form of $watch(...) like so:

scope.$watch(function() { return authentication.isAuthenticated }, function () {
    setClass();
});

and your code will be happy :).