Question

我正在尝试创建一个指令，它将以三种方式之一影响目标元素：1。单独使用，2。在编译之前删除所有其他指令，以便用户无法与之交互（例如，ng-click，例如），3。完全删除元素。

到目前为止，我可以让所有三个工作，但只能选择元素。我有一个可点击的跨度，如果我应用选项2，它可以正常工作。 ng-click被剥离，用户无法进行交互;但是，对按钮元素应用相同的逻辑会导致奇怪的副作用。首先，它不是删除ng-click，而是重复事件监听器。检查时，元素没有附加两个ng-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>

Answer 1

通过纯粹的实验，我发现在删除属性后立即使用post方法而不是pre以及调用elem.off（）来修复我的问题并从我想要禁用的元素中删除所有事件侦听器。只做一个或另一个会导致同样的错误。

如果有人可以解释这种行为，并且可能建议更好地解决我正在做的事情，我会接受这个答案。

指令有条件地剥离其他指令

1 个答案: