ngRepeat together with ngInclude doesn't work (1.2.0rc1)

[jafp]

Hi,

When using the Angular 1.2.0rc1, elements with both ngRepeat and ngInclude does not seem to be repeated and included. E.g. <div ng-repeat="item in items" ng-include="'item.html'"></div>. This works in Angular 1.1.5, but nothing happens now.

See this Plunker: http://plnkr.co/edit/JFGw9CWhsAX4PgqCQneS

/Jacob

Conclusion

Please see bug summary and conclusion before posting further comments

Update

As of 1.2.0-rc.3 ngRepeat and ngInclude work together. Here is a demo: http://plnkr.co/edit/Yvd73HiFS8dXvpvpEeFu?p=preview

[jafp]

Possibly related issue: #3581

[ernestoalejo]

This was exactly the same code that made me open #3581. It's only that the example was already in the web so I rewrote it a little bit.

[mhevery]

The issue is that new animations need a common element for adding/removing ngView/ngInclude into the DOM, since only a common element can be animated. It is therefore possible to have two ngViews in the DOM at the same time. The one just added, and the old one which is being animating away. This implies that ngView/ngInclude need to be able to make copies of themselves hence are transcluded elements. But our compiler can only deal with one transclusion per element so combining ngRepeat with ngInclude/ngView produces an error.

Unfortunately this is not something we can easily fix. So the only thing we can do is to provide a work around. Place ngRepeat an a parent element of ngView/ngInclude inserting extra div if necessary.

PS: This used to work in old animations, because we had a hack where the ng-animate would on children of ngView/ngInclude rather then on ngViwe/ngInclude itself. This hack is not possible with pure CSS animations.

@matsko

[symblify]

@mhevery The jsfiddle provided in issue #3581 has the ng-include as a child of the ng-repeat and it doesn't seem to work, if this is the same as the workaround you're suggesting.

[ernestoalejo]

I'm using ngInclude + ngRepeat to generate trees of items. LI's or TD's can't be wrapped inside other elements.

Also in this other example using the wrap work around and ngSwitch, when pressing "Set foo" or "Set bar" for the first time (and the template loads) the content is not showed. If you press foo & bar more times, the content it's continuously added one right below the old one, instead of deleting it.

http://plnkr.co/edit/M9E7Vn1BFSIknYuhcyhw?p=preview

If you change the script to 1.1.5 it works without any problems:

http://plnkr.co/edit/lo3CNp1s55hwYvzkwTZO?p=preview

[istarkov]

Any descendant ng-include of the ng-repeat also does not work.

[lhorie]

you can get around this by using a component:

before:

<div ng-repeat="a in b">
  <ng-include src="'my-include.html'"></ng-include>
</div>

after:

html

<div ng-repeat="a in b">
  <my-include></my-include>
</div>

js

angular.module("tickets").directive("myInclude", function() {
    return {
        restrict: "E",
        templateUrl: "/my-include.html"
    }
})

[IgorMinar]

the descendant scenario is a different bug which is being addressed already by @matsko

[kevin-smets]

Seems like a very common problem when nesting ngIf / ngTransclude or using templates and such.

@IgorMinar is there an issue logged for this somewhere which we can watch for updates?

[matsko]

Lets revisit this once #3649 is put in (the revert commits may have something todo with the transclusion bugs).