AngularJS更改了编译指令的顺序

Question

据我所知,Angular按照先到先得的原则编写了一些内容,这有点棘手.我做了一个包含一些元素的指令,我希望有一个链接属性来查找内容中的东西.

对于一个具体的用例:我正在制作一个输入标签指令,它在内容中查找第一个输入,并将随机生成id的input一个for属性添加到label

这是代码:

// Find the first element with the attribute ng-label-target or the first input and links a label to it
app.directive('ngLabel', function () {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      label: '@',
    },
    template: '<span class="ng-label">' +
                '<label class="ng-label-text">{{label}}</label>' +
                '<span class="ng-label-content" ng-transclude></span>' +
              '</span>',
    link: function (scope, element, attrs) {
      scope.id = scope.id || 'random-id-' + Math.floor(Math.random() * 90000000);
      angular.element(element[0].querySelector('.ng-label-text')).
        attr({for:scope.id});

      var target = angular.element(element[0].querySelector('[ng-label-target]'));
      if (!target || target.length == 0) {
        target = angular.element(element[0].querySelectorAll('input,select,textarea')[0]);
      }
      target.attr({id:scope.id});
    },
  };
});

用法示例:

<ng-label label="Text:">
   <input type="text" ng-model="page.textColor" size="5" maxlength="7" placeholder="e.g. #000" required />
   <input ng-label-target type="color" ng-model="page.textColor" required />
</ng-label>

这本身就像一个魅力.

但是现在我想自动生成几个输入并使标签指向第一个输入.问题是,当我做了ng-repeat里面我ng-label那么ng-repeat代码我的指令进行处理,以便实际并没有任何发现后会被生成.

因此,我的问题是:有没有一种方法可以指定角度来评估内部的嵌套指令而不是相反的方式？

或者,有没有比我现在做的更好的方式呢？

我做了一个小提琴来举例说明评估内容的顺序.你看到外部指令的值小于或等于它的内容(不能低于微秒,所以我不得不做一堆重复):

http://jsfiddle.net/YLM9P/

Answer 1

从角度文档:

优先级 当在单个DOM元素上定义了多个指令时,有时需要指定指令的应用顺序.优先级用于在调用编译函数之前对指令进行排序.优先级定义为数字.首先编译具有更高数字优先级的指令.预链接功能也按优先级顺序运行,但后链接功能以相反的顺序运行.具有相同优先级的指令的顺序是未定义的.默认优先级为0.

TERMINAL 如果设置为true,则当前优先级将是将执行的最后一组指令(当前优先级的任何指令仍将执行,因为未定义相同优先级的执行顺序).

因此,对于您的问题,我认为将terminal属性设置为true将解决您的问题.

app.directive('ngLabel', function () {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    ....
    ....
    terminal: true
});