Question

我希望有一个指令来检查组件的tag name，并根据某些条件显示/隐藏组件。我希望显示隐藏的行为类似ng-if（不初始化组件的控制器）。例如：

<my-component custom-if></my-component>

在指令custom-if中：

return {
  compile: function($element) {
    if($element[0].tagName === 'some condition'){
      //Element is my-component
      $element.remove();
    }
  }
};

我遇到的问题是，即使我删除元素，它仍然会调用my-component的控制器。如果我删除指令的compile或preLink函数内的元素，也会发生同样的情况。我也尝试继承ng-if但我无法在custom-if指令中获取组件的标记名称，因为该元素是comment（可能是ng-if特定的行为在评论中包装元素）

更新：将postLink功能更改为compile，以确保其无法正常工作。它显示/隐藏了元素，但是总是实例化控制器，即使它已被删除，这就是我想要避免的内容

Answer 1

我认为您应该能够通过制定customIf高优先级指令来实现这一目标。然后在编译函数中，您可以检查是否允许主机组件/指令继续。如果没有，customIf只会完全删除元素。如果检查通过，则customIf需要通过取消设置自己的属性来删除自身，然后再次重新编译元素。

这样的事情：

.directive('customIf', function($compile) {
  return {
    priority: 1000000,
    terminal: true,
    compile: function(element, attrs) {

      if (element[0].tagName === 'MY-COMPONENT') {
        element.remove();
      }
      else {
        // remove customIf directive and recompile
        attrs.$set('customIf', null);
        return function(scope, element) {
          $compile(element)(scope);
        }
      }
    }
  };
});

演示： http://plnkr.co/edit/Y64i7K4vKCF1z3md6LES?p=preview

Angular ng-if like指令

1 个答案: