Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
f-masche opened this issue Mar 13, 2013 · 42 comments
Closed

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

f-masche opened this issue Mar 13, 2013 · 42 comments

Comments

@f-masche
Copy link

@f-masche f-masche commented Mar 13, 2013

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
Copy link
Contributor

@IgorMinar IgorMinar commented Mar 13, 2013

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 

Loading

@IgorMinar
Copy link
Contributor

@IgorMinar IgorMinar commented Mar 13, 2013

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);
            });

Loading

IgorMinar added a commit to IgorMinar/angular.js that referenced this issue Mar 13, 2013
@z0u
Copy link

@z0u z0u commented Apr 23, 2013

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

Loading

@dennisjlee
Copy link

@dennisjlee dennisjlee commented May 8, 2013

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?

Loading

@conoremclaughlin
Copy link

@conoremclaughlin conoremclaughlin commented May 10, 2013

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!

Loading

@trav
Copy link

@trav trav commented Jun 5, 2013

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

Loading

@anglee
Copy link

@anglee anglee commented Jun 5, 2013

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

Loading

@leblancmeneses
Copy link

@leblancmeneses leblancmeneses commented Jun 26, 2013

+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

Loading

@sukei
Copy link

@sukei sukei commented Jul 24, 2013

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

Loading

@ihsw
Copy link

@ihsw ihsw commented Jul 28, 2013

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.

Loading

@wesleycho
Copy link
Contributor

@wesleycho wesleycho commented Jul 30, 2013

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.

Loading

@sveilleux
Copy link

@sveilleux sveilleux commented Aug 7, 2013

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

Loading

@squidsoup
Copy link

@squidsoup squidsoup commented Sep 11, 2013

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

Loading

@footloosemoose
Copy link

@footloosemoose footloosemoose commented Sep 16, 2013

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.

Loading

@rodrigopedra
Copy link

@rodrigopedra rodrigopedra commented Sep 16, 2013

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.

Loading

@xaviershay
Copy link

@xaviershay xaviershay commented Oct 13, 2013

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.

Loading

@psmolenski
Copy link

@psmolenski psmolenski commented Oct 20, 2013

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

Loading

@Reem-Alatrash
Copy link

@Reem-Alatrash Reem-Alatrash commented Nov 11, 2013

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

Loading

@raphaelokon
Copy link

@raphaelokon raphaelokon commented Nov 18, 2013

Same here.

Loading

@kiddkai
Copy link

@kiddkai kiddkai commented Nov 18, 2013

Same issue here

Loading

@raphaelokon
Copy link

@raphaelokon raphaelokon commented Nov 18, 2013

Okay, works for me in 1.2.1

Loading

@bashmish
Copy link

@bashmish bashmish commented Nov 18, 2013

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

Loading

@btford
Copy link
Contributor

@btford btford commented Dec 9, 2013

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

Loading

@btford btford closed this Dec 9, 2013
@iamdustan
Copy link

@iamdustan iamdustan commented Dec 9, 2013

👏👏👏

Loading

@muhammedea
Copy link

@muhammedea muhammedea commented Dec 23, 2013

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.

Loading

@caitp
Copy link
Contributor

@caitp caitp commented Dec 23, 2013

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)

Loading

@muhammedea
Copy link

@muhammedea muhammedea commented Dec 24, 2013

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

Loading

@caitp
Copy link
Contributor

@caitp caitp commented Dec 24, 2013

@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

Loading

@muhammedea
Copy link

@muhammedea muhammedea commented Dec 24, 2013

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

Loading

@caitp
Copy link
Contributor

@caitp caitp commented Dec 24, 2013

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.

Loading

@bsr203
Copy link

@bsr203 bsr203 commented Jan 29, 2014

@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

Loading

@bsr203
Copy link

@bsr203 bsr203 commented Jan 29, 2014

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

Loading

jerickson added a commit to sportngin/sport-ng that referenced this issue Mar 31, 2014
There’s a bug in the angular library with directives that use hg-repeat
on the root of the directive template, included using templateUrl.  The
fix is to wrap the ng-repeat element:
angular/angular.js#2151
@pandaiolo
Copy link

@pandaiolo pandaiolo commented Apr 5, 2014

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

Loading

@tommybananas
Copy link

@tommybananas tommybananas commented Apr 10, 2014

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

Loading

@mattrock23
Copy link

@mattrock23 mattrock23 commented Jul 10, 2014

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

Loading

@xtang
Copy link

@xtang xtang commented Sep 16, 2014

Same issue with 1.2.17 when use jQuery

Loading

@SomeKittens
Copy link
Member

@SomeKittens SomeKittens commented Nov 21, 2014

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

Loading

@davemecha
Copy link

@davemecha davemecha commented Feb 15, 2016

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)

Loading

@gkalpak
Copy link
Member

@gkalpak gkalpak commented Feb 16, 2016

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.

Loading

@ghost
Copy link

@ghost ghost commented Feb 23, 2016

+1

Loading

@chillyistkult
Copy link

@chillyistkult chillyistkult commented May 3, 2016

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

Loading

@inthegarage
Copy link

@inthegarage inthegarage commented Jun 30, 2016

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

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.