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

[janmarek]

I hope you will do something about this issue. Please don't introduce any backward incompatible changes just because of some internal refactoring reason :)

[dkingsbury]

@mhevery, @symblify Here is another simple example of include not working inside other directives like switch, repeat, etc (nested, not combined):

1.1.5:
http://jsfiddle.net/YSzxN/4/

1.2.0rc1
http://jsfiddle.net/YSzxN/5/

[rtpm]

@dkingsbury This might be a problem with transclusion.

I've build angular.js using the code as of yesterday (21.08.2013) and
seems like it's been fixed (changes reverted) (at least for ngInclude+ngTemplate)
Don't know if it's final or temporary solution.

See latest commits for more info.

[kevin-smets]

Tested this with the latest build (last commit is 99175f4) and now my includes inside templates work again. Awesome.

[ognus]

@kevin-smets works for me as well, however the recent change broke the ng-show when used on the same element as ng-include. Element with ng-show="false" is visible, but shouldn't.

I have tried current snapshot (v1.2.0-6b91aa0) and ng-include="'some_templ.html'" ng-show="false" always shows the element. It works fine in version 1.2rc1.

See plunker: http://plnkr.co/edit/5mjPnXNydIcaOoa8KXAN

[nderoche]

@kevin-smets : the "ng-repeat ng-include" pattern was broken since v.1.2.0rc1. Now using the last snapshot (v1.2.0-e86de0d), it works again for me too. Thanks !

[cemo]

<div ng-if="true" ng-view></div> is this supposed to be working?

[joaomvfsantos]

Latest build works for me also.

[filiptc]

Related: #3849

[allenwyma]

I'm having a problem. In 1.0.7, I had this working:

<script type="text/ng-template" id="render-branch">
  <a tabindex='-1' ng-href='{{branch|getCalendarUrl}}'>{{branch.name}}</a>
  <ul class='dropdown-menu' ng-show="branchTree[company.id][branch.id].length > 0">
    <li ng-class="{'dropdown-submenu':branchTree[company.id][branch.id].length > 0}" ng-repeat="branch in branchTree[company.id][branch.id]" ng-include="'render-branch'"></li>
  </ul>
</script>
<ul class="nav pull-left nav-pills" ng-repeat="company in companies">
  <li class='dropdown'>
    <a class='dropdown-toggle' data-toggle='dropdown'>{{company.name}} <b class='caret'/></a>
    <ul class='dropdown-menu' ng-show="company.branches.length > 0">
      <li ng-class="{'dropdown-submenu':branchTree[company.id][branch.id].length > 0}" ng-repeat="branch in branchTree[company.id][null]" ng-include="'render-branch'"></li>
    </ul>
  </li>
</ul>

Where the branchTree would put all children of a company's branch inside of the branchTree and I would just iterate from that. I need to use each branch from the branchTree to check to be run against the ng-class. this was working PERFECT before, but now is not working. I'm using the latest snapshot of e12e584. I tried to use onload, but it doesn't seem to evaluate correctly.

Edit: It seems that ng-class is broken? I tried to use this way, but the class is not being applied:

<script type="text/ng-template" id="render-branch">
  <a tabindex='-1' ng-href='{{branch|getCalendarUrl}}'>{{branch.name}}</a>
  <ul class='dropdown-menu' ng-repeat="branch in branchTree[company.id][branch.id]">
    <li ng-class="{'dropdown-submenu':branchTree[company.id][branch.id].length > 0}"  ng-include="'render-branch'"></li>
  </ul>
</script>
<ul class="nav pull-left nav-pills" ng-repeat="company in companies">
  <li class='dropdown'>
    <a class='dropdown-toggle' data-toggle='dropdown'>{{company.name}} <b class='caret'/></a>
    <ul class='dropdown-menu' ng-repeat="branch in branchTree[company.id][null]">
      <li ng-class="{'dropdown-submenu':branchTree[company.id][branch.id].length > 0}"  ng-include="'render-branch'"></li>
    </ul>
  </li>
</ul>

I even used {{branchTree[company.id][branch.id].length > 0}} just above the li and it evaluates to true, so I'm guessing that ng-class is now broken? BTW, using e12e584 that I just built (which was the last build that DIDN'T fail, I just compiled it myself)

Seems even this doesn't work, when you set it to true:

<li ng-class="{'dropdown-submenu':true}" ng-include="'render-branch'" class="ng-scope">
  <a tabindex="-1" ng-href="/companies/10/branches/8/calendar" class="ng-scope ng-binding" href="/companies/10/branches/8/calendar">test</a>
  <!-- ngRepeat: branch in branchTree[company.id][branch.id] --><ul class="dropdown-menu ng-scope" ng-repeat="branch in branchTree[company.id][branch.id]">
    <!-- ngInclude: 'render-branch' --><li ng-class="{'dropdown-submenu':branchTree[company.id][branch.id].length &gt; 0}" ng-include="'render-branch'" class="ng-scope">
  <a tabindex="-1" ng-href="/companies/10/branches/9/calendar" class="ng-scope ng-binding" href="/companies/10/branches/9/calendar">test2</a>
  <!-- ngRepeat: branch in branchTree[company.id][branch.id] -->
</li>
  </ul>
</li>

[kencaron]

So I have this somewhat working (still has a significant issue) in 1.2.RC2 and not working on v1.2.0-6c59e77, released 9/23.

The issue I'm having on RC2 is that the order doesn't seem to be honored at all after initialization. Thankfully it was easy to reproduce with a plnkr. http://plnkr.co/edit/hxu2kh06Gr2Hsd8h3zGg?p=preview I try to explain the issue better there.

This is the error I'm getting on v1.2.0-6c59e77
Error: [$compile:multidir] Multiple directives [ngInclude, ngIf] asking for transclusion on: <!-- ngInclude: -->

[cqr]

This issue refers to a problem that was not possible to solve by moving
directives between elements. Your issue is different and can be resolved
with the addition of a nested element.

On Tue, Sep 24, 2013 at 11:39 PM, Ken Caron notifications@github.comwrote:

So I have this somewhat working in 1.2.RC2 and not working on
v1.2.0-6c59e77, released 9/23.

The issue I'm having on RC2 is that the order doesn't seem to be honored
at all. Thankfully it was easy to reproduce with a plunkr.
http://plnkr.co/edit/hxu2kh06Gr2Hsd8h3zGg?p=preview I try to explain the
issue better there.

This is the error I'm getting on v1.2.0-6c59e77
Error: [$compile:multidir] Multiple directives [ngInclude, ngIf] asking
for transclusion on:

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/3584#issuecomment-25060211
.

chrisrhoden

[kencaron]

@chrisrhoden Thanks Chris that seems to do it. I added an example to that plunker in case anyone else runs into this. Want to note that the ng-repeat + ng-include in the same element fails silently in RC2 and throws an error outright in 6c59e77.

[mgdelmonte]

ng-repeat plus ng-include still not working within tables for 1.2.0-rc2, and you can't use <ng-repeat within a TR element so it is still quite broken. That is, there is no working solution for the problem:

<tr ng-repeat=... ng-include=...

because you cannot push the <ng-include> into a separate element (<tr ng-repeat-... will refuse to do any <ng-include... because it only accepts a child element of type <td>) and you can't use <td ng-include... because the content you need to include is itself a TD or a set of TDs.

Note that it is possible to use <tr ng-repeat=... ng-include=... if you don't want anything special to happen (e.g., animation), BUT it also breaks scope because it creates two disassociated child scopes, neither of which inherits from the parent.

[mgdelmonte]

Also orderBy doesn't work with repeat+include. Try this:

http://plnkr.co/edit/3vXV5fQyN84siTNLObYn?p=preview

[dferrin]

@matsko Thanks for the post.

Also, ng-include can't be on the same element as ng-controller. In 1.1.5, it was working.

By the way, it's failing silently. Why?

[mort3za]

this worked in 1.2.0-rc.2

<div data-ng-repeat="j in remote_data" >
          <div data-ng-include data-src="template_row1"></div>
          <div data-ng-include data-src="template_row2"></div>
          <div data-ng-include data-src="template_row3"></div>
</div>

[IgorMinar]

I accidentally deleted summary comment written by @matsko. I'm reposting it here from an archive. Original comment:

---

Alright let's summarize what's going on here.

1. ng-include + ng-repeat on the same element.
   This does not work even on the latest snapshot. Why? Because ng-include and ng-repeat both attach and fire animation events on the element. So if an enter animation is triggered then is it a repeat enter or an include enter event? If you place both directives on the same element then a compile error should appear in the form of Error: [$compile:multidir] Multiple directives [ngInclude, ngIf] asking for transclusion on: .
   how to fix: place the ng-include element directly inside of ng-repeat.

NOTE this won't go away even if you're not using ngAnimate.

2. ng-include + ng-class or ng-show/ng-hide
   This was a bug at the start of rc1 and maybe rc2, but it has been fixed. ng-show and ng-class are dependent on the inner workings of $animate which is used with ng-repeat.
   how to fix: use the latest snapshot present in http://code.angularjs.org/snapshot/.

3. (ng-include, ng-repeat or ng-view) with ng-if
   ng-if doesn't have it's own transclusion system, but if you use it with any of the three directives then, once any of those directives has a content change, ng-if won't be able to catch on to what has changed and will try to remove the old element. So don't place them on the same element. You should also get the same error as before if you do so.
   how to fix: place the ng-if as an inner element inside of ng-repeat. Or place it as a parent element to ng-include or ng-view

4. ng-include and ng-switch
   Same problem as ng-if. ng-switch doesn't know that the element is gone and then tries to add/remove it.
   how to fix: place the ng-include element directly inside of the ng-switch-when element(s).

5. Direct responses to each Plunkr example here:

@jafp upgrade to the snapshot and place your ng-include element inside of the repeater.

@symblify I don't see anything wrong with the (new) fiddle. Works as expected. I guess it's been updated to use a working build.

@ernestokarim if you update your code to use the latest snapshot then it works fine.

@dkingsbury if you update your code to use the latest snapshot then it works fine.

@ognus your code looks fine. I see you've upgraded to use the snapshot. Good.

@cemo no that won't work. Look at 3) in my response right here.

@tamtakoe your code is fine, but your 1st "bad" repeater causes the page to break. Remove that and you'll see your code works fine.

@chrisrhoden the latest build should throw a JS erorr if they're on the same element.

Unless there is anything that I entirely forgot or something that is really broken that should be brought up. Please try the snapshot first and then raise an issue. For now I'm closing this since there is nothing new we can do to make ngRepeat + ngInclude work on the same element.

[mgdelmonte]

Understood except that since ng-include and ng-repeat can't be pseudo-elements, there is still no workaround for situations such as tables, where you can only nest one type of element. If you need to repeat a series of TDs in a TR, you simply can't repeat-include them because you need repeat on the TR and there is no element to wrap the TDs in which you can use to include. It's not the end of the world, but it leads to ugly code and a lot of longhand repetition. Seems like a good solution would be to allow ng-include and ng-repeat as elements, not just attributes.

[IgorMinar]

just a quick update that ngRepeat now works now works with ngInclude (as of 1.2.0-rc.3). here is a demo: http://plnkr.co/edit/Yvd73HiFS8dXvpvpEeFu?p=preview

[tmilker]

ng-switch-when and ng-include are still incompatible in the same element in 1.2.0-rc.3

[clouddueling]

Edit Not an issue with ng-include/ng-repeat fixed thanks to @caitp

I'm having this issue when I try to ng-repeat ng-include.

ng-include inside an ng-repeat (Does not work):
http://plnkr.co/edit/5sYq17O5i0Qc3uqFZ108?p=preview

No repeating just an ng-include (Works as expected):
http://plnkr.co/edit/JjNB1QjMGgoFNo8IBHOu?p=preview

[caitp]

@clouddueling I must be missing something, how is this not working? It includes view1.html (which is the only view in the collection of views)

[clouddueling]

@caitp I forgot to add that in the first example you when you drag n' drop the object is not added to the list (ngRepeat > ngInclude).

In the second example when you drag n' drop the object is added to the list (ngInclude).

The directive works when it's just the ngInclude, is there something I'm missing in the directive?

[caitp]

Your issue there is that the "Drag Me Down" items are not in the inner ng-repeat, but their $index is not undefined as you expect (because the outer ng-repeat gives it an $index of 0).

You can use ng-init to alias $index so that you don't mix up the inner and outer ng-repeat, which the docs actually call "the only appropriate use of ng-init", although that might be a bit dramatic. That would solve your issue here, it's not a bug with ng-include

http://plnkr.co/edit/LmL6v4ubb40T8d51BjoQ?p=preview see here --- Note that this still breaks sorting unless you actually update $itemNum whenever $index is updated (here by simply setting it to the value of to)

[clouddueling]

@caitp Nice! How could you have possibly known that off the top of your head?
You indirectly, are the first to contribute to clouddueling/angular-common. Ty!

(I promise that plunkr is not how the real code looks. I'm basing mine on an example)

[caitp]

Oh, actually, the sorting broken-ness is a bit more complicated than I said unfortunately, you still get pretty buggy sorting behaviour with that solution. But, it should put you on the right track I guess