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

Question

The below code is not working since i used both ng-controller and ng-repeat inside same tag. But if i use ng-repeat inside child div, its working. Why?

**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

Here:

The Logical Reason:

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

As you know, ng-repeat is multiplicating the containing tag, so here, there will be a lot of controllers on the same page like this:

<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>

So this is why you cannot use them in the same tag, you have to separate them like you did in your second example.

The Main Reason:

Also, the main logic is, you can manage the components inside the controller's ones, not others; so your angular components that you want to manage like ng-repeat, ng-if or ng-model they all should be inside a unique controller tag, not at the same level.

To provide this, AngularJS library gives priority to the components like controllers have the highest ones than the other components like ng-repeat has lower, so the controller tag will be compiled first and then the others. If the compiler sees some errors like syntactical errors, it will inform the coder to not to do those.

You can read more about the priorities in AngularJS here .

Answer 2

According to the docs, ng-repeat as a directive has a priority of 1000, and ng-controller a priority of 500, meaning that ng-repeat will get compiled first, and the objectArray array you are referring to is bound to the scope of myController which has not been initialized yet, so ng-repeat will in that case fail.

Nice post about directive priority: 1