In AngularJS 1.2, how do I specify the controller for an ng-include?

Question

We are attempting to upgrade from AngularJS 1.0.7 to 1.2.1. In 1.0.7, we were able to set the controller for an ng-include alongside in the same element, like so

<div data-ng-include="'include1.html'" data-ng-controller="MyCtrl1"

MyCtrl1 would become available to the code inside include1.html.

This breaks when moving to AngularJS 1.2.1 which I have illustrated in this plunkr. If you change the referenced version to 1.0.7 it works again.

I am interested in understanding what has changed/why this is. I tried searching but couldn't find anything or I am not using the right terms.

Additionally, what would be the correct way to specify a controller for my ng-includes?

score 8 · Accepted Answer · edited May 23 '17 at 12:07

8

Why not move the ng-controller from the element having ng-include to inside the template:

index.html:

<div data-ng-include="'include1.html'"></div>    
<div data-ng-include="'include2.html'"></div>

include1.html

<div data-ng-controller="MyCtrl1">
    <h1>{{Username}}</h1>
</div>

include2.html

<div data-ng-controller="MyCtrl2">
    <h1>{{Username}}</h1>
</div>

It seems ngController and ngInclude cannot be used in conjunction with each other since Angular version 1.2:

Issue 1, Issue 2, Issue 3 and SO post.

edited May 23 '17 at 12:07

Community

1
1

answered Nov 20 '13 at 13:27

AlwaysALearner

43,759
9
96
78

I am interested in understanding why this is happening and what has changed, any ideas? – Mendhak Nov 20 '13 at 13:29
I think this has got to do with the newer version not allowing multiple directives on the same element. – AlwaysALearner Nov 20 '13 at 13:30
I have attached few links. – AlwaysALearner Nov 20 '13 at 13:46
Fantastic, I did see the post by Igor Minar but skimmed it by. Thanks for pointing at the right place! – Mendhak Nov 20 '13 at 14:23
I've noticed ng-include creates child scope.. does this approach mean you get a grand-child scope created? – Andrew Apr 04 '14 at 16:30
Nesting the ng-include element inside the ng-controller element doesn't seem to work when using $compile.... – Tyguy7 Jul 23 '14 at 16:39

In AngularJS 1.2, how do I specify the controller for an ng-include?

1 Answers1