CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
Steve
Steve

Reputation: 237

ng-repeat not binding when directive template is loaded via templateUrl

I've been stuck on this for hours and hours - can anyone help?

I have a list of nested directives, which I'm iterating through ng-repeat. The templates for these directives are fairly chunky so I've modularised them into separate HTML files and loaded them via templateUrl, but this seems to be breaking the data binding.

I've replicated the problem here: http://plnkr.co/edit/72HUb0vhtpYWuRHnlq3b?p=preview

HTML:

<div project-ext ng-repeat="project in projects"></div>

project.html

{{project.name}} <button ng-click="projects.splice($index,1)">-</button><br>
<div schedule-ext ng-repeat="schedule in project.schedules"></div>

schedule.html

{{schedule.name}}<button ng-click="remove($index)">-</button>

JS:

app.directive('projectExt', function() {
    return { 
        templateUrl: 'project.html'
    };
});

app.directive('scheduleExt', function() {
    return { 
        templateUrl: 'schedule.html',
        link: function(scope) {
            scope.remove = function(i) {
                scope.$parent.project.schedules.splice(i,1)
            };
        }
    };
});

Can anyone tell me why the remove buttons don't work in the second listing, when all I've done is change the directives construction from template to templateUrl?

Upvotes: 1

Views: 2784

Answers (2)

zs2020
zs2020

Reputation: 54522

It is a known bug, please follow these links. You can use the other version you wrote as a workaround.

Transcluded element not being deleted on removal of list item when using ng-repeat

https://github.com/angular/angular.js/issues/2151

https://groups.google.com/forum/#!msg/angular/0CP0zpTnZMM/5OzBni7d9sgJ

Upvotes: 0

Ye Liu
Ye Liu

Reputation: 8986

This problem seems to be related to a bug reported at https://github.com/angular/angular.js/issues/2151

To workaround it, simply don't put ngRepeat and your directives which are using templateUrl on the same element; instead, place ngRepeat on an wrapper:

HTML:

<div ng-repeat="project in projects"><div project-ext></div></div>

project.html

{{project.name}} <button ng-click="projects.splice($index,1)">-</button><br>
<div ng-repeat="schedule in project.schedules"><div schedule-ext></div></div>

Plunk: http://plnkr.co/edit/BapWX0LpqkcLFegq1fhU

Upvotes: 5

Related Questions