Question

跟进this answer，我试图建立两个指令，允许/拒绝最终用户可以看到元素。

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();
            });
        }
    }
}]);

我的问题是，当我进行登录时，不会再次调用$watch函数来显示不可见元素。

下面列出了SessionTool的简历。

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.
        },
        ...
    };
}]);

任何人都可以指出为什么$ watch没有被解雇？

提前致谢。

Answer 1

我认为你的指令目前在指令范围内观察匿名变量SessionTool.user而不是实际变量。我建议改用这种方法。

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.
                });
            }
        }
    }]);

隐藏/显示基于会话服务的元素的指令 - AngularJS

1 个答案: