AngularJS -权限指令

Question

我正在尝试编写指令， 将评估用户权限。

如果用户不允许看到给定的内容

1. 内容将不显示(完成，工作正常)

2. 来自permission指令中的控制器的请求将无法得到解雇。

的例子:

控制器:

function MyController ($scope){
     // performing imediately server request, witch is allowed only for admin
     // therefore i will get error when non admin user access this page
}

权限指令:

return {
        priority: 1000,
        restrict: 'E',
        link: (scope, element, attrs) => {
            var permission = attrs.permission;
            if (/*evaluating permission*/) { 
                // user has permission, no work for me
                return;
            }
            element.remove();
        }
    };

一起:

<permission permission="isAdmin">
    <div ng-controller="MyController">
    </div>
</permission>

这个版本正在从DOM中删除元素，但是MyController中的请求仍然被执行。当然，我可以在MyController中检查权限，但我不想这样做。

Answer 1

你的问题是控制器总是在链接函数执行之前被调用。看这提琴

function MyCtrl($scope) {
    console.log('in controller');
}
myApp.directive('permission', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            console.log('in link');

日志显示:

in controller
in link

Answer 2

我尝试了另一种方法，将元素移除到编译函数中。根据日志，它是在控制器前执行的，所以它是正确的位置。不管怎样，请求还是被解雇了。所以我试着作为一个盲射删除元素的子元素(我知道，这是没有意义的，删除元素应该是足够的，也应该删除子元素)。

但它成功了!

compile: function(element) { var children = element.children(); children.remove(); element.remove(); }

它正在工作，但我不确定它是多少OK(例如未来版本Ang)

Answer 3

如果我是你，我会打电话给服务器，检查他们是否被授权访问。

在指令中这样做是没有意义的。

指令通常用于操作dom，这是授权确认通常应该在控制器中处理，然后有触发事件的结果。

然后让你的指令监听该事件，并操作dom，如果他们从服务器访问。

否则任何人都可以很容易地注入他们想要的任何东西，并看到你的管理面板。

如果你不确定我的意思，请告诉我，如果你需要我可以扩展答案。