After reading this response, I attempted to create two directives that would control the visibility of elements for the 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();
});
}
}
}]);
The issue I am facing is that when I log in, the $watch function does not trigger again to show the previously hidden element.
A summary of my SessionTool can be found 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.
},
...
};
}]);
Can anyone explain why the $watch isn't triggering as expected?
Thank you in advance.