订单 AngularJS 指令的创建不是我从文档中理解的那样

Question

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

重要的是，此操作应按照可选指令在视图中出现的顺序进行。

根据我的研究：

指令逐步编译等

我认为这会起作用，因为将按顺序创建预链接和控制器。但这并不总是发生。

这是我的 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-repeats 之后创建了 ng-if 可选择的底部，然后创建了其余的 ng-repeat。

我做了一个笨蛋来演示会发生什么。请检查播放器的控制台日志。

Plunker：指令创建顺序测试

Answer 1

在角度JS中 基于优先级的嵌套指令的编译顺序元素嵌套得越深，编译得越晚。

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

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