1

我有一个 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-if 选择的底部是在第一个 ng-repeat 之后创建的，然后创建了其余的 ng-repeat。

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

Plunker：指令创建顺序测试

4

1 回答 1

3

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

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

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

于 2016-01-25T10:09:29.573 回答