javascript - AngularJS 更改编译指令的顺序

Question

据我所知，Angular 以先到先得的方式编译内容，这有点棘手。我做了一个指令，它包装了一些元素，我想要一个链接属性来查找内容中的东西。

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

的 for 属性

代码如下:

// 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-label 中执行 ng-repeat 时，在我的指令被处理后会生成 ng-repeat 代码，所以实际上什么也找不到。

因此我的问题是:有没有一种方法可以指定 angular 来评估嵌套的指令，而不是相反？

或者，是否有比我目前正在做的更好的方法来做到这一点？

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

http://jsfiddle.net/YLM9P/

Answer 1

来自 Angular 文档:

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

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

因此，对于您的问题，我相信将终端属性设置为 true 会解决您的问题。

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