Scopes, ng-repeat, and directives

Question

Somewhat new to Angular and trying to come to grips with scopes. I understand that each pass through a collection via ng-repeat gets its own scope. What I don't understand is in the following code:

<tr data-ng-repeat="oneField in $parent.formEventDefinition">
  <ng-include src="getUrl(oneField.fieldType)"></ng-include>
  {{oneField.fieldType}}

In the ng-include, oneField.fieldType is undefined but the {{}} directive on the next line writes the correct value to the page. Why does it find the right value from scope in one case but not the other?

Either an answer or a pointer to a place to find the answer on my own is good. I'm trying to learn and am getting lost.

Thanks!

Can you reproduce in fiddle? This should be fine, working also here: http://jsfiddle.net/seyenaz/HB7LU/13156/ — Omri Aharon, Apr 23 '15 at 19:59

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

Because ng-include does creates a child scope from current running scope as like ng-repeat, ng-if, ng-switch-when does, use should use $parent.oneField.fieldType there

Look this answer for more information

edited May 23 '17 at 12:22

Community

1
1

answered Apr 23 '15 at 16:32

Pankaj Parkar

134,766
23
234
299

1

`ng-include` and the `{{}}` expression are under the same scope (the `ng-repeat`'s iteration's scope), they should both be fine. – Omri Aharon Apr 23 '15 at 19:58

score 0 · Answer 2 · answered Apr 23 '15 at 20:09

It turns out that this wasn't a scope problem. It turns out the problem was that it is not legitimate to nest an <ng-include> element inside a <tr> element and Angular enforces this in some way. When I reworked the HTML to put the <ng-include> inside a <td> it all started magically working.

Thanks for the help.

Dave

Scopes, ng-repeat, and directives

2 Answers2