什么是ng-repeat指令的“优先级”可以改变吗?

时间:2013-10-09 11:08:58

标签: angularjs angularjs-directive angularjs-ng-repeat ng-repeat

Angular Documentation说: -

  

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

我认为ng-repeat指令的优先级低于自定义指令,在dynamic id and custom directive等特定用例中。角度是否允许修改指令的优先级来选择一个在另一个之前的执行?

2 个答案:

答案 0 :(得分:55)

是的,您可以设置指令的优先级。 ng-repeat的优先级为1000,实际上高于自定义指令(默认优先级为0)。您可以使用此编号作为指导,了解如何根据指令设置自己的优先级。

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

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

答案 1 :(得分:11)

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