ng-repeat doesn't work if template is included by templateUrl

[f-masche]

Hi everyone,

i can't tell if its a bug or a feature, but when i tried to outsource my directive templates into own files i stumbled across an strange behaviour.
If the template has a ng-repeat on its root element it works fine as long the template is inline in the directive. If i put the template in an own file and specify the url in the templateUrl, ng-repeat doesn't work.
The problem is that i need to have the ng-repeat in the root element.

I made a fiddle for demonstration: http://jsfiddle.net/eaNNf/11/

update:

I found a workaround for this problem:
Instead of: templateUrl: 'template.html'
i write: template: $templateCache.get('template.html')

[IgorMinar]

I updated the fiddle to use the latest version: http://jsfiddle.net/eaNNf/13/

yes, this is a bug. the compilation of this template results in:

TypeError: Cannot call method 'insertBefore' of null
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:2117:14
    at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:156:18)
    at forEach.after (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:2116:5)
    at Object.JQLite.(anonymous function) [as after] (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:2171:17)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:14038:22
    at publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:3880:29)
    at Object.ngRepeatWatch (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:14037:13)
    at Object.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:8030:38)
    at Object.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:8238:24)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js:982:13 

[IgorMinar]

with jquery present the exception is not thrown but the template doesn't render either.

the exceptions comes from ngRepeat, when it calls cursor.after:

          if (!last) {
            linker(childScope, function(clone){
              cursor.after(clone);
              last = {
                  scope: childScope,
                  element: (cursor = clone),
                  index: index
                };
              nextOrder.push(value, last);
            });

[z0u]

I have a similar issue: for me, the template renders once, but doesn't update when the model changes. See http://stackoverflow.com/questions/16160549/transcluded-element-not-being-deleted-on-removal-of-list-item-when-using-ng-repe

[dennisjlee]

I hit this issue today with Angular 1.0.6 ... good times debugging it. Now that I found this issue I suppose it might not be as valuable, but I made a reduced testcase too: http://plnkr.co/edit/5FkhDZsE6hbd7g8k0HGv?p=preview

In all versions up through 1.1.3, the first button on that page fails to add any elements to the ng-repeat (because cursor.after(clone) fails, since cursor is not in the DOM tree!). In 1.1.4 after the major refactoring to ng-repeat, the first button in my example fails for a different reason - elements are inserted but in the wrong order. The first element of the array is always rendered last in the ng-repeat.

@IgorMinar any chance you can try to revisit fixing this?

[conoremclaughlin]

Hi,

Just to throw my hat in the ring. I'm also having the same problem mentioned:

Renders once, but the data-bindings/scope disappear. I'm inserting the template into the DOM dynamically and then compiling it using $compile. If I navigate away and then back, it works, so I assume the $templateCache comes into effect and everything is a'okay.

This would be a very powerful fix for modularity. Thanks for any help!

[trav]

I am running into this as well. Please add my vote to the list of people who want to see this fixed. Thanks!

[anglee]

I was hit by this too. Please add my vote as well. I have also created a Plunker:
http://plnkr.co/edit/XXRIezHmHP2tcKGqTj9l?p=preview

[leblancmeneses]

+1 in my case i'm dynamically rendering a template into bootstrap popup. Other ng stuff works just not ng-repeat.

a.popover({ trigger: 'manual', placement: 'right', html: true, content: function () {
        var h = $("#Subscribe\\.html").html().trim();
        var c = $compile(h)($scope);
        return c;
    }
});

Edit:
Actually i found out what my problem was:
after compile i need to do a $scope.$apply(); - now everything binds correctly

[sukei]

I am hit by this one too. It make me sick for hours ! Thanks to everyone who tries to fix it.

[ihsw]

Also hit this one today, it's a bit baffling. For those who may have not realized it yet: it's because your ng-repeat is on the root element in your directive's template. Wrap your ng-repeat in any element and it'll be fine.

[wesleycho]

I ran into this issue and verified it for both 1.1.5 and 1.0.7, but in the specific combination of ng-repeat, filter, and a custom directive using templateUrl.

1.1.5: http://plnkr.co/edit/tr6X6PGnqAFbJwiSm7GK?p=preview
1.0.7: http://plnkr.co/edit/lf6EEfEMnncf4rXpC8x8?p=preview

I should note, my app works properly if I remove the filter, or remove the custom directive, or even removing jQuery (bafflingly enough). My plnkr examples will work correctly if you use template in the custom directive, or remove the custom directive completely.

As far as I can tell, what is happening is that Angular is not setting the appropriate binding initially and thus cannot clean up the old references. In my app I am working on, I am doing <div ng-repeat="resource in resources | filter: customFilter" resource-card="...">, and whenever I change $scope.resources in my controller from an AJAX request via $http, the old resources elements persist, even though $scope.resources is the correct object, and the new elements created by ng-repeat get destroyed appropriately. The old elements generated do not have the ng-scope class, but the new ones do. You can observe a similar behavior with the plnkr links above except that ng-isolate-scope is not included.

templateUrl for the custom directive works properly if you switch to your templates being in the app's html file via:
<script id="template/my_template.html" type="text/ng-template">
[insert my html here]
</script>

Switching to template also works properly as well, using replace: false.

Edit: On further investigation, the culprit has something to do with the success callback with $http within the compileTemplateUrl - this is a complex problem though. In fact, in my app, switching to replace: false does not fix the problem consistently. I've done an extensive look through compile.js and find it quite difficult to identify the culprit. The scope itself is not being lost, but ng-repeat is losing being able to identify the items to remove properly here.

[sveilleux]

Same problem here. Within a directive using a template, with a ng-repeat. It only happens only chrome. Firefox and IE9 have no problem.

[squidsoup]

+1 for this issue - just hit it with a nested repeater in the body of an angular-ui tab. Thanks for the workaround ihsw.

[footloosemoose]

I stumbled into this bug too. Putting the html into a template: instead of a templateUrl: did the trick. Had me scratching my head for a few hours.

[rodrigopedra]

Is someone woking on this?

Looking at the lib code it seems it might be the way compileTemplateUrl fetches the template async and how it deals with the cache.

I think some test-case code might help:

index.html

<!doctype html>
<html lang="en-us" data-ng-app="app">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
<div>
    <input type="text" data-ng-model="search" placeholder="Search" />
    <ul>
        <li data-customtag
            data-value="{{ item }}"
            data-ng-repeat="item in ['Ana', 'Aline', 'Maria', 'Zelia'] | filter:search">
        </li>
    </ul>
</div>
<!-- version 1.2.0-rc2 -->
<script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.directive( 'customtag', function () {
        return {
            restrict: 'A',
            scope: { value: '@' },
            templateUrl: 'partials.html'
        }
    });
</script>
</body>
</html>

partials.html

<span>{{ value }}</span>

Meanwhile the workaround I am using is to wrap he custom directive and apply ng-repeat to the wrapper.

[xaviershay]

I saw this error transiently (~30% of the time) on 1.2.0-rc.2.

The workaround mentioned above about applying ng-repeat to a wrapper div worked for me.

[psmolenski]

It turns out that the problem also affects ng-required directive and supposedly other validating directives

[Reem-Alatrash]

I'm running into the same issue with v1.2.0-rc.3

[raphaelokon]

Same here.

[kiddkai]

Same issue here

[raphaelokon]

Okay, works for me in 1.2.1

[bashmish]

Confirm. Is seems like in 1.2.1 ng-repeat works as expected.

[btford]

This should be working in ~1.2.1. If not, let me know and I'd be happy to re-open this issue. Thanks!

[iamdustan]

👏👏👏

[muhammedea]

I'm running into the same issue with angular 1.2.5. It is working but ng-click is not working properly.
I have a directive called sortableheader. I am using it in html like this:

<tr sortableheader columns="col1,col2" names="Column Name, Column Name 2" dataservice="DataSrv">
</tr>

app.directive('sortableheader', function () {
    return {
        restrict: 'A',
        scope : { DataSrv : '=dataservice' },
        link : function (scope, element, attributes) {
            scope.columns = attributes.columns.split(',');
            scope.names = attributes.names.split(',');
        },
        template : '<th ng-repeat="column in columns"><a href="" ng-click="DataSrv.setSorting(\'{{column}}\')">{{names[$index]}}<i ng-class="DataSrv.isReverseSorting()?\'icon-down-open-1\':\'icon-up-open-1\'" ng-show="DataSrv.getSorting()==\'{{column}}\'"></i></a></th>'
    };
});

I am checking in browser inspector. It looks like everything is good. Like this
<a href="" ng-click="DataSrv.setSorting('aciklama')" class="ng-binding">................</a>
But when I click the link it is passing '{{column}}' text to the setSorting function. I think when I click, something happens. It was working in angular 1.1.5 . I don't know why it isn't working now.

[caitp]

There are all sorts of issues with table content templates... Here's an example http://plnkr.co/edit/KS10iuML7r2rLvMAHHA8?p=preview ... watch in the web console, if replace is true, you end up with a totally screwed up template when table content is involved...

The non-replacing template (similar to your example above) works correctly, if and only if table content is actually valid in the element using the directive (eg, <tr data-sortable-header data-dataservice="foo"></tr>). But it won't work as expected if the element it's being used on is not a valid owner of table content.

SO, I'm curious to see a reproduction of this, because it would be interesting if you are using a perfectly valid table content parent for that directive and still having the issues you mention (because if you are, then there may be an actual bug)

[muhammedea]

I am getting "internal server error" in Plunker. I don't know why. I created A plunker example. So you can see the problem. http://plnkr.co/edit/iji9jbZPxfq5B9w7kOpA?p=preview
Edit: I updated the plunker link. Please take look at it

[caitp]

@muhammedea you mean because it shows up in the webconsole as "{{column}}" rather than the column ID you're expecting? If that's the case, the reason is because it just parses an expression, it doesn't interpolate the expression...

If you change it to just ng-click="DataSrv.setSorting(column)" rather than ng-click="DataSrv.setSorting(\'{{column}}\')", it would work fine

[muhammedea]

Yes, it is exactly what I mean. I changed the code like you sad. It worked. Thanks.
But I was using like this before. It was working. I was using angular 1.1.x. then I updated. I think something is changed. Or it was working by chance. I don't know.
Thank you...

[caitp]

Interpolation of attributes happens at a specific priority now, which may have incidentally happened before ngClick prior to 1.2 --- Just a guess, but that's probably the most likely reason why you notice the change now.

[bsr203]

@btford can you please look at http://stackoverflow.com/questions/21419368/angularjs-typeerror-cannot-call-method-insertbefore-of-null , if this is related to above issue, please reopen

[bsr203]

just now, trying @ihsw suggestion to wrap it in a div seems to work. How do we explain this?

[pandaiolo]

Another example of this, I think here with this issue in angular-deckgrid.

deckgrid directive uses $templateCache to load the template, then use ng-include to load it into the parent inline template :

this.template =

   <div data-ng-repeat="column in columns" class="{{layout.classList}}">
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate"></div>
   </div>

Here is the demo of the issue with deckgrid directive + ebedded ng-repeat in transcluded cardTemplate

[tommybananas]

+1 still seeing issues in 1.2.1 with ng-repeat on the templated directive.

[mattrock23]

Had this issue with 1.2.1. Updated to 1.2.18 and it seems to be working now.

[xtang]

Same issue with 1.2.17 when use jQuery

[SomeKittens]

Still seeing issues with this (1.2.23) when programmatically $compiling (unit tests). Setting replace: false worked as a workaround.

[davemecha]

I have a similar problem and I wonder if there is a connection to this bug. I tested it with version up to angular 1.5.

I have a template loaded with templateUrl in a custom directive. The directive is set to replace: true and I have ng-repeat on the first element in the directive. The directive itself is rendered in a ng-repeat. That leads to a wrong rendered DOM as shown in the following Plunker: https://plnkr.co/edit/hYFOH4GIwGTbnnkeOOnx?p=preview

I found some easy workarounds but I'd really like to avoid them:

• remove replace: true
• load as template
• wrap the ng-repeat element in the directive in any other element (e.g. a div)

[gkalpak]

I looked into it a bit, but it doesn't seem to be easy to fix. I'm afraid it's one of the corner-cases with replace: true. Since it's deprecated, we're not actively fixing issues with such corner-cases, unfortunately.

[ghost]

+1

[chillyistkult]

Still not working with Angular 1.5.0 and up as @davemecha described. Even the workaround does not work in my case.

[inthegarage]

Removing replace:true also worked for me. Going forward I'd suggest we avoid using it, even if it isn't technically depreacted.