AngularJS - 权限指令

Question

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

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

1. 内容不会显示（完成，工作正常）

2. 来自权限指令内的控制器的请求将无法获得 被解雇了。

例子：

控制器：

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

您的问题是控制器总是会在链接函数执行之前被调用。见this fiddle。

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

它正在工作，但我不确定它有多好（例如未来版本的 Ang。）

Answer 3

如果我是你，我会调用服务器并检查它们是否被授权访问。

用指令来做这件事并没有什么意义。

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

然后让您的指令监听该事件并在他们从服务器获得访问权限时操纵 dom。

否则任何人都可以轻松地注入他们想要的任何内容并查看您的管理面板。

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