Order AngularJS 指令不是按照我从文档中理解的那样创建的

Question

我有一个 AngularJS 应用程序，我必须在其中使用光标键遍历某些元素。为此，我创建了一个名为 selectable 的指令，它在创建指令时将一些信息添加到服务中的列表。

请务必按照可选指令在视图中出现的顺序进行。

根据我的研究：

Directive compilation step by step 和其他

我认为这会奏效，因为 link 和控制器会按顺序创建。 但这并不总是发生。

这是我的 HTML:

<selectable ng-repeat="suggestion in pCtrl.suggestions" value="suggestion">
  {{suggestion}}
</selectable>
<div ng-repeat="cat in pCtrl.categories">
  <selectable ng-repeat="item in cat" value="item">
    {{item}}
  </selectable>
</div>
<selectable ng-if="true" value="pCtrl.bottom">
  <div>
    Bot content
  </div>
</selectable>

这里是指令：

app.directive('selectable', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {},
    controller: 'SelectableCtrl',
    controllerAs: 'selCtrl',
    bindToController: {
      value: '='
    }
  };
})
.controller('SelectableCtrl', [
  function() {
    var self = this;
    console.log(this.value);
  }
]);

我在控制台日志中看到的是，使用 ng-if 可选择的底部是在第一个 ng-repeat 之后创建的，然后创建了其余的 ng-repeats。

我做了一个 plunker 来演示会发生什么。请检查 plunker 的控制台日志。

Plunker: Directive creation order test

Answer 1

在angular JS中嵌套指令根据优先级的编译顺序 元素嵌套越深，编译越晚。

在你的代码中 可选择的类别嵌套在 div divng-repeat="cat in pCtrl.categories"

首先编译外部 div 标签中的可选指令 然后编译内部 div 标记中存在的剩余可选指令。 因此，控制台输出显示其编译顺序。