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.