从AngularJS中的指令添加指令

一尘不染

从AngularJS中的指令添加指令

javascript

我正在尝试构建一个指令，该指令负责在其声明的元素上 添加更多指令
。例如，我要建立一个指令，需要增加的照顾datepicker，datepicker-language和ng-required="true"。

如果我尝试添加这些属性然后使用，则$compile显然会生成一个无限循环，因此我正在检查是否已添加所需的属性：

angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function compile(scope, element, attrs) {
        if (element.attr('datepicker')) { // check
          return;
        }
        element.attr('datepicker', 'someValue');
        element.attr('datepicker-language', 'en');
        // some more
        $compile(element)(scope);
      }
    };
  });

当然，如果我没有$compile该元素，则将设置属性，但不会引导该指令。

这种方法正确还是我做错了？有没有更好的方法来实现相同的行为？

UDPATE
：鉴于这$compile是实现此目标的唯一方法，是否有一种方法可以跳过第一次编译过程（该元素可能包含多个子级）？也许通过设置terminal:true？

更新2 ：我尝试将指令放入一个select元素，并且按预期，编译运行两次，这意味着预期options 的数量是原来的两倍。

阅读 316

2020-04-25

共1个答案

一尘不染

如果在单个DOM元素上具有多个指令，并且它们的应用顺序很重要，则可以使用该priority属性对应用程序进行排序。较高的数字优先。如果未指定，则默认优先级为0。

编辑：讨论之后，这是完整的工作解决方案。关键是 删除属性 ：element.removeAttr("common- things");，以及element.removeAttr("data-common-things");（如果用户data-common- things在html中指定）

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, //this setting is important, see explanation below
      priority: 1000, //this setting is important, see explanation below
      compile: function compile(element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {  },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

要么：

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function link(scope,element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });

解释为什么我们必须设置terminal: trueand priority: 1000（一个大数字）：

当DOM准备就绪时，angular遍历DOM以标识所有已注册的指令，并根据priority 这些指令是否在同一元素
上来逐一编译指令。我们设定的自定义指令的优先级为较高的数字，以确保它会被编译首先，用terminal: true，其他指令将被跳过
该指令被编译后。

编译我们的自定义指令时，它将通过添加指令并删除自身来修改元素，并使用$ compile服务 编译所有指令（包括已跳过的指令） 。

如果我们没有设置terminal:trueand priority: 1000，则有可能在自定义指令 之前先
编译一些指令。当我们的自定义指令使用$ compile编译element
=>时，再次编译已经编译的指令。这将导致无法预测的行为，尤其是如果在我们的自定义指令之前编译的指令已经转换了DOM。

也修改模板的指令的示例是ng-repeat（priority = 1000），在ng-repeat编译时，ng-repeat
在应用其他指令之前先制作模板元素的副本 。

2020-04-25