ng-repeat 指令的“优先级”是什么，你能改变它吗？答案

【问题标题】：What is `priority` of ng-repeat directive can you change it?ng-repeat 指令的“优先级”是什么，你能改变它吗？
【发布时间】：2013-10-09 11:08:58
【问题描述】：

Angular 文档说：-

DOM 的编译是通过调用 $compile() 来执行的方法。该方法遍历 DOM 并匹配指令。如果一个找到匹配项，将其添加到与关联的指令列表中给定的 DOM 元素。一旦给定 DOM 元素的所有指令已确定它们是按优先级排序和它们的 compile() 函数被执行。

我认为 ng-repeat 指令的优先级低于自定义指令，在某些用例中，例如 dynamic id and custom directive。角度是否允许修改指令的优先级以选择先执行一个指令？

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-repeat ng-repeat

【解决方案1】：

是的，您可以设置指令的优先级。 ng-repeat 的优先级为 1000，实际上高于自定义指令（默认优先级为 0）。您可以使用此数字作为指南，了解如何在与它相关的指令上设置您自己的优先级。

angular.module('x').directive('customPriority', function() {
    return {
        priority: 1001,
        restrict: 'E',
        compile: function () {
            return function () {...}
        }
    }
})

优先级 - 当在单个 DOM 元素上定义了多个指令时，有时需要指定应用指令的顺序。优先级用于在调用编译函数之前对指令进行排序。优先级被定义为一个数字。首先编译具有更高数值优先级的指令。具有相同优先级的指令的顺序未定义。默认优先级为 0。

【讨论】：

不相关/挑剔的问题：compile 和 link 函数不是互斥的（即您只会使用一个或另一个）吗？
@JaKXz compile 和 link 函数并不相互排斥。您可以在同一指令上使用两者。 compile 函数发生在 link 函数之前，并返回一个 link 函数。您将使用compile 来操作指令的模板。在 compile 中进行 DOM 操作是不安全的，因为模板值尚未针对 scope 进行插值。请参阅此StackOverflow question 以获得更深入的解释。
我想他可能提到代码的编写方式使得指令的链接部分永远不会被执行（语法错误）。

【解决方案2】：

AngularJS 找到与一个元素相关的所有指令并处理它。此选项告诉 Angular 按优先级对指令进行排序，因此具有更高优先级的指令将在其他指令之前编译或链接。有这个选项的原因是我们可以对之前编译的指令的输出进行条件检查。

在下面的示例中，首先添加按钮，并且仅在将class 添加到当前按钮之后：

演示Fiddle

App.directive('btn', function() {
  return {
    restrict: 'A',
    priority: 1,
    link: function(scope, element, attrs) {
      element.addClass('btn');
    }
  };
});

App.directive('primary', function() {
  return {
    restrict: 'A',
    priority: 0,
    link: function(scope, element, attrs) {
      if (element.hasClass('btn')) {
        element.addClass('btn-primary');
      }
    }
  };
});

【讨论】：