Question

目前我正在尝试为我的角度应用程序添加登录。角度用户会话在登录和注销时效果很好。但我的指示是一个麻烦制造者。

我添加了一个名为access的新HTML属性标记，该标记采用逗号分隔的用户角色列表。用户必须至少具有其中一个角色才能查看html元素。如果他没有角色，他就看不到这个元素（我不知道这是否是正确的方法，但我没有其他想法，以隐藏无法访问的用户的导航项目）。

<a class="navbar-brand" ng-href="/serverDebug" access="admin">Server Debug</a>

此处只有角色为admin的用户才能看到菜单链接指令应该监视具有access属性的所有元素。

app.directive('access',
    function (AuthSharedService, UserSession) {
        return {
            /*
                    A = Attribute   = <div Doc></div>
                    C = Class       = <div class="Doc"></div>
                    E = Element     = <Doc data="book_data"></Doc>
                    M = coMment     = <!--directive:Doc -->
             */
            restrict: 'A',
            link: function (scope, element, attrs) {
                console.log("directive start");
                //scope.$watch('UserSession.user.roles', function (val) {
                    console.log("directive watcher change");
                    var roles = attrs.access.split(',');
                    if (roles.length > 0) {
                        if (AuthSharedService.isAuthorized(roles)) {
                            element.removeClass('hide');
                        } else {
                            element.addClass('hide');
                        }
                    }
                //});
            }
        };
    }
);

函数AuthSharedService.isAuthorized获取一组角色并将它们与UserSession进行比较。（在UserSession中，只存储用户ID，电子邮件和他的角色。）
如果其中一个角色属于用户角色，则会返回true，其他为false。这个功能很棒。我也在应用程序的其他地方使用它。

但似乎该指令仅在开始时的角度js初始加载时触发一次。此时，AuthSharedService.isAuthorized始终显示false，因为尚未加载UserSession。但这是在角度的app.run部分自动完成的。因此，仅在几纳秒之后，会话就会加载并且用户已登录但该指令不会第二次触发。所以我尝试使用一个观察者来每次触发指令，用户角色改变（在开头有空，然后它将是一个数组，所以一个观察者应该工作）。但似乎我不熟练这样做。

我的错误是什么？我的观察者错了吗？或者我是否必须在指令之外使用观察者？但那我怎么称呼指令呢？谢谢你的帮助。

Answer 1

使用观察者并让它调用一个函数：

app.directive('access',
    function (AuthSharedService, UserSession) {
        return {
            /*
                    A = Attribute   = <div Doc></div>
                    C = Class       = <div class="Doc"></div>
                    E = Element     = <Doc data="book_data"></Doc>
                    M = coMment     = <!--directive:Doc -->
             */
            restrict: 'A',
            link: function (scope, element, attrs) {
                console.log("directive start");
                var roles = attrs.access.split(',');
                function checkAuthorized() {
                    if (!roles.length) return false;
                    return AuthSharedService.isAuthorized(roles);
                }
                scope.$watch(checkAuthorized, function (val) {
                    console.log("directive watcher change ",val);
                    if (val) {
                        element.removeClass('hide');
                    } else {
                        element.addClass('hide');
                    }
                });
            }
        };
    }
);

观察者为什么能看到一个功能？我只使用观察者来获取变量和模型

来自文档：

$watch(watchExpression, listener, [objectEquality])

watchExpression

在每个$digest周期中评估的表达式。   返回值的更改会触发对listener的调用。

  使用当前范围作为参数调用

function(scope)。



string评估为expression



— AngularJS $rootScope/$scope API Reference - $watch

绑定到模型时AngularJS指令更新

1 个答案:

`$watch(watchExpression, listener, [objectEquality])`