Question

我正在写一个权限库来添加到我的角度网站。

每个元素都有权限属性：

<md-button permission="adjust" ng-click="vm.adjust()">Adjust</md-button>

服务将检查登录用户是否有权执行操作。该指令的代码如下：

let permissionActionsDirective = ($compile, actionsService) => {
  return {
    priority: permissionPriority,
    terminal: true,
    restrict: 'A',
    link: function($scope, $element, $attr) {
      actionsService.isEnabled($attr.permission)
        .then(()=>{
          $compile($element, null, permissionPriority - 1)($scope);
        },()=>{
          $element.remove()
        })
      }
  };
};

这很有效。

然后我遇到了一个不允许所有子元素的情况，所以我也想隐藏父元素：

<md-menu permission-container ng-if="vm.mode === 'manager'" layout="row">
  <md-button flex ng-click="$mdOpenMenu($event)">Menu</md-button>
  <md-menu-content class="actionMenu">
    <md-menu-item permission="add_user">
      <md-button ng-click="vm.onAdd()">Add user</md-button>
    </md-menu-item>
    <md-menu-item permission="settings">
      <md-button ng-click="vm.settings()">Settings</md-button>
    </md-menu-item>
  </md-menu-content>
</md-menu>

所以我需要创建permissionContainer指令，并将权限指令的代码修改为：

let permissionActionsDirective = ($compile, actionsService) => {
  return {
    priority: permissionPriority,
    terminal: true,
    restrict: 'A',
    require: '?^permissionContainer',
    link: function($scope, $element, $attr, containerCtrl) {
      actionsService.isEnabled($attr.permission)
        .then(()=>{
          _.invoke(containerCtrl, 'allow');
          $compile($element, null, permissionPriority - 1)($scope);
        },()=>{
          _.invoke(containerCtrl, 'deny');
          $element.remove()
        })
      }
  };
};

现在我的问题是permissionContainerDirective的代码应该如何？我想要以下行为：

具有permission-container属性的元素将加载隐藏。
如果即使一个孩子通过调用permissionContainerController.allow（）发出信号，也会显示该项目
如果没有信号指示allow（）（或所有发出信号的deny（））从DOM中删除元素

我一直在尝试修改编译/控制器/链接功能，但无法正确完成。你能帮我解决一下吗？

谢谢！

根据子指令

0 个答案: