在 AngularJS 中添加指令

javascript angularjs model-view-controller angularjs-directive mvvm

2022-08-30 01:26:43

我正在尝试构建一个指令，负责向声明它的元素添加更多指令。例如，我想构建一个指令来处理添加，和。datepickerdatepicker-languageng-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：鉴于这是实现这一目标的唯一方法，有没有办法跳过第一个编译过程（该元素可能包含几个子元素）？也许通过设置？$compileterminal:true

更新2：我尝试将指令放入元素中，并且如预期的那样，编译运行两次，这意味着预期s的数量是预期的两倍。selectoption

答案 1

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

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

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);
          }
        };
      }
    };
  });

工作 plunker 可在以下位置找到： http://plnkr.co/edit/Q13bUt?p=preview

艺术

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);
      }
    };
  });

演示

解释为什么我们必须设置终端：true和优先级：1000（一个高数字）：

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

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

如果我们不设置和，则有可能某些指令在我们的自定义指令之前编译。当我们的自定义指令使用$compile编译元素 =>再次编译已编译的指令。这将导致不可预知的行为，尤其是在自定义指令之前编译的指令已经转换了 DOM 的情况下。terminal:truepriority: 1000

有关优先级和终端的更多信息，请查看如何理解指令的“终端”？

同时修改模板的指令的一个示例是（优先级 = 1000），在编译时，在应用其他指令之前复制模板元素。ng-repeatng-repeatng-repeat

感谢@Izhaki的评论，以下是对源代码的引用：https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.jsngRepeat

答案 2

您实际上只需一个简单的模板标签即可处理所有这些问题。有关示例，请参阅 http://jsfiddle.net/m4ve9/。请注意，我实际上不需要超级指令定义上的编译或链接属性。

在编译过程中，Angular 在编译之前会拉入模板值，因此您可以在此处附加任何进一步的指令，Angular 将为您处理。

如果这是一个需要保留原始内部内容的超级指令，则可以使用并替换内部transclude : true<ng-transclude></ng-transclude>

希望有所帮助，如果有什么不清楚的地方，请告诉我

亚历克斯