Question

以下代码无效，因为我在同一标签内使用了ng-controller和ng-repeat。但是，如果我在子div中使用ng-repeat，它的工作。为什么呢？

**Not Working**
<div ng-controller="myController" ng-repeat= "object in objectArray">
{{object.State}}
{{oject.Capital}}
</div>


**Working**
<div ng-controller="myController" >
<div ng-repeat= "object in objectArray">
{{object.State}}
{{oject.Capital}}
</div>
</div>

Answer 1

下面：

逻辑原因：

<div ng-controller="myController" ng-repeat= "object in objectArray">
{{object.State}}
{{oject.Capital}}
</div>

如您所知，ng-repeat正在使包含标记倍增，所以在这里，同一页面上会有很多控制器，如下所示：

<div ng-controller="myController" ng-repeat= "object in objectArray">
    lorem
    ipsum
</div>
<div ng-controller="myController" ng-repeat= "object in objectArray">
    lorem
    ipsum
</div>
<div ng-controller="myController" ng-repeat= "object in objectArray">
    lorem
    ipsum
</div>

所以这就是为什么你不能在同一个标签中使用它们，你必须像在第二个例子中那样将它们分开。

主要原因：

此外，主要逻辑是，您可以管理控制器内部的组件，而不是其他组件;所以你想要管理的角度组件如ng-repeat，ng-if或ng-model它们都应该在一个唯一的控制器标签内，而不是在同一级别。

为了提供这一点，AngularJS库优先考虑像控制器那样的组件比其他组件（如ng-repeat具有更低的组件）更高，因此控制器标签将首先编译，然后编译其他组件。如果编译器看到一些错误，如语法错误，它将告知编码人员不要这样做。

您可以在AngularJS here中详细了解优先级。

Answer 2

根据文档，ng-repeat作为指令的优先级为1000，ng-controller的优先级为500，这意味着ng-repeat将首先编译，{{1您引用的数组绑定到尚未初始化的objectArray范围，因此myController将失败。

关于指令优先权的好帖子：1

为什么ng-controller和ng-repeat在Angular JS中的同一个标签内不能同时工作？

2 个答案: