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

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

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@IgorMinar

IgorMinar Mar 13, 2013

Member

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 
Member

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 
@IgorMinar

This comment has been minimized.

Show comment
Hide comment
@IgorMinar

IgorMinar Mar 13, 2013

Member

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

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

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

@z0u

This comment has been minimized.

Show comment
Hide comment
@z0u

z0u 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

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

@dennisjlee

This comment has been minimized.

Show comment
Hide comment
@dennisjlee

dennisjlee 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?

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

This comment has been minimized.

Show comment
Hide comment
@conoremclaughlin

conoremclaughlin 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!

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

This comment has been minimized.

Show comment
Hide comment
@trav

trav 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!

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!

@anglee

This comment has been minimized.

Show comment
Hide comment
@anglee

anglee 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

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

@leblancmeneses

This comment has been minimized.

Show comment
Hide comment
@leblancmeneses

leblancmeneses 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

+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

This comment has been minimized.

Show comment
Hide comment
@sukei

sukei Jul 24, 2013

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

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.

@ihsw

This comment has been minimized.

Show comment
Hide comment
@ihsw

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

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.

@wesleycho

This comment has been minimized.

Show comment
Hide comment
@wesleycho

wesleycho Jul 30, 2013

Contributor

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.

Contributor

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.

@sveilleux

This comment has been minimized.

Show comment
Hide comment
@sveilleux

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

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

This comment has been minimized.

Show comment
Hide comment
@squidsoup

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

+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

This comment has been minimized.

Show comment
Hide comment
@footloosemoose

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

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

This comment has been minimized.

Show comment
Hide comment
@rodrigopedra

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

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

This comment has been minimized.

Show comment
Hide comment
@xaviershay

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

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

This comment has been minimized.

Show comment
Hide comment
@psmolenski

psmolenski Oct 20, 2013

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

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

@GraveRobber

This comment has been minimized.

Show comment
Hide comment
@GraveRobber

GraveRobber Nov 11, 2013

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

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

@raphaelokon

This comment has been minimized.

Show comment
Hide comment

Same here.

@kiddkai

This comment has been minimized.

Show comment
Hide comment
@kiddkai

kiddkai Nov 18, 2013

Same issue here

kiddkai commented Nov 18, 2013

Same issue here

@raphaelokon

This comment has been minimized.

Show comment
Hide comment
@raphaelokon

raphaelokon Nov 18, 2013

Okay, works for me in 1.2.1

Okay, works for me in 1.2.1

@bashmish

This comment has been minimized.

Show comment
Hide comment
@bashmish

bashmish Nov 18, 2013

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

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

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Dec 9, 2013

Contributor

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

Contributor

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!

@btford btford closed this Dec 9, 2013

@iamdustan

This comment has been minimized.

Show comment
Hide comment
@iamdustan

iamdustan Dec 9, 2013

👏👏👏

👏👏👏

@muhammedea

This comment has been minimized.

Show comment
Hide comment
@muhammedea

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

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

This comment has been minimized.

Show comment
Hide comment
@caitp

caitp Dec 23, 2013

Contributor

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)

Contributor

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)

@muhammedea

This comment has been minimized.

Show comment
Hide comment
@muhammedea

muhammedea 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

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

This comment has been minimized.

Show comment
Hide comment
@caitp

caitp Dec 24, 2013

Contributor

@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

Contributor

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

@muhammedea

This comment has been minimized.

Show comment
Hide comment
@muhammedea

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

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

This comment has been minimized.

Show comment
Hide comment
@caitp

caitp Dec 24, 2013

Contributor

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.

Contributor

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.

@bsr203

This comment has been minimized.

Show comment
Hide comment

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

@bsr203

This comment has been minimized.

Show comment
Hide comment
@bsr203

bsr203 Jan 29, 2014

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

bsr203 commented Jan 29, 2014

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

jerickson added a commit to sportngin/sport-ng that referenced this issue Mar 31, 2014

fix alerts so that they actually display
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

@jerickson jerickson referenced this issue in sportngin/sport-ng Mar 31, 2014

Merged

Fix alerts so that they actually display #4

@pandaiolo

This comment has been minimized.

Show comment
Hide comment
@pandaiolo

pandaiolo 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

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

@pandaiolo pandaiolo referenced this issue in akoenig/angular-deckgrid Apr 5, 2014

Open

ng-repeat inside template does not seem to work (demo) #43

@tommybananas

This comment has been minimized.

Show comment
Hide comment
@tommybananas

tommybananas Apr 10, 2014

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

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

@mattrock23

This comment has been minimized.

Show comment
Hide comment
@mattrock23

mattrock23 Jul 10, 2014

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

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

@xtang

This comment has been minimized.

Show comment
Hide comment
@xtang

xtang Sep 16, 2014

Same issue with 1.2.17 when use jQuery

xtang commented Sep 16, 2014

Same issue with 1.2.17 when use jQuery

@SomeKittens

This comment has been minimized.

Show comment
Hide comment
@SomeKittens

SomeKittens Nov 21, 2014

Member

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

Member

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.

@ZenitK ZenitK referenced this issue in angular-gantt/angular-gantt Feb 4, 2015

Closed

gantt-table not rendered when gantt is within a ng-repeat #340

@davemecha

This comment has been minimized.

Show comment
Hide comment
@davemecha

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

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

This comment has been minimized.

Show comment
Hide comment
@gkalpak

gkalpak Feb 16, 2016

Member

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.

Member

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.

@ghost

This comment has been minimized.

Show comment
Hide comment

ghost commented Feb 23, 2016

+1

@chillyistkult

This comment has been minimized.

Show comment
Hide comment
@chillyistkult

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

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.

@inthegarage

This comment has been minimized.

Show comment
Hide comment
@inthegarage

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment