Directive to Hide/Show elements based on Session Service - AngularJS

Question

Following up this answer, I was trying to build two directives to allow/deny elements to be visible by the end user.

angular.module('app.directives').directive('deny', ['SessionTool', function (SessionTool) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            scope.$watch(SessionTool.user, function (value, oldValue) {
                var list = attrs.deny.split(',');
                if (SessionTool.hasAnyRole(list))
                    return elem.hide();
                return elem.show();
            });
        }
    }
}]);

My problem is that when I do make the logon, the $watch function is not being called again to make the invisible element appear.

A resume of my SessionTool is listed below.

angular.module('app.tools').factory('SessionTool', ['$cookies', function ($cookies) {
    var _cookieKey = 'user';

    return {
        user: {},
        init: function () {
            var u = $cookies.get(_cookieKey);
            try {
                u = angular.fromJson(u);
                this.user = u;
            } catch (e) {
                console.log('invalid json');
            }
        },
        login: function (u) {
            this.user = u;
            $cookies.putObject(_cookieKey, u, {path: '/'}); // @TODO encrypt the whole JSON before saving it to cookies.
        },
        ...
    };
}]);

Anybody could point out why the $watch isn't being fired?

Thanks in advance.

Answer 1

I think that your directive is currently watching an anonymous variable SessionTool.user in your directive scope not the actual variable. I suggest going with this approach instead.

angular.module('app.tools').factory('SessionTool', ['$cookies','$rootScope', function ($cookies) {
var _cookieKey = 'user';
var _user = {};

return {

    setUser: function(user) {
       _user = user;
       $rootScope.$broadcast('SessionToolChange');
    }
    getUser: function() {
       return _user;
    }
    init: function () {
        var u = $cookies.get(_cookieKey);
        try {
            u = angular.fromJson(u);
            this.user = u;
        } catch (e) {
            console.log('invalid json');
        }
    },
    login: function (u) {
        this.user = u;
        $cookies.putObject(_cookieKey, u, {path: '/'}); // @TODO encrypt the whole JSON before saving it to cookies.
    },
    ...
};

}]);

angular.module('app.directives').directive('deny', ['SessionTool', function        (SessionTool) {
        return {
            restrict: 'A',
            controller: function (scope, elem, attrs) {
                scope.$on('SessionToolChange', function (value, oldValue) {
                    // get the user and do your stuff.
                });
            }
        }
    }]);