有条件删除其他指令的指令

我试图创建一个指令,该指令将以以下三种方式之一影响目标元素:1。别管它,2。在编译之前去掉所有其他指令,以便用户无法与其交互(例如,ng click),3。完全拆下滤芯。

到目前为止,我可以让这三个都工作,但只能在选定的元素上工作。我有一个可点击的范围,如果我应用选项2,它就可以正常工作。ng点击被剥离,用户无法交互;然而,对按钮元素应用相同的逻辑会产生奇怪的副作用。首先,它不是删除ng click,而是复制事件侦听器。检查时,元素没有附加两个ng click指令,但它有两个click侦听器,单击它会导致相同的操作发生两次。

下面是当前的指令和我正在使用的当前模拟模型。

return {
  restrict: 'A',
  priority: 1500,
  compile(elem, attr) {
    let action = () => { /**/ };

    const currentLocation = $location.path().split('/')[1];
    const permissionsLocation = appConfig[currentLocation];
    const fullPath = attr.permissions;
    if (_.has(permissionsLocation, fullPath)) {
      const permLevel = _.get(permissionsLocation, fullPath);
      if (permLevel === 'disable') {
        action = (scope, element) => {
          attr.$set('disabled');
          elem.css({
            cursor: 'not-allowed'
            // 'pointer-events': 'none'
          });
          elem
            .addClass('no-permissions')
            .removeAttr('ng-click')
            .removeAttr('ng-keyup')
            .removeAttr('ng-change')
            .removeAttr('ng-touchstart')
            .removeAttr('ng-touchend')
            .removeAttr('permissions');
          $compile(element)(scope);
        };
      } else if (permLevel === 'destroy') {
        action = (scope, element) => {
          element.remove();
        };
      }
    }
    return {
      pre(scope, element) {
        action(scope, element);
      }
    };
  }
};

型号:

appConfig.location1 = {
      thing1: {
        perm1: 'disable',
        perm2: 'destroy',
        perm3: 'destroy'
      },
      thing2: {
        perm4: 'disable'
      }
    };

以下是我将如何应用该指令:

<button ng-click="blah()" permissions="thing1.perm1"></button>