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?

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/18236267/ng-repeat-not-binding-when-directive-template-is-loaded-via-templateurl

标签

angularjs

angularjs-directive

angularjs-ng-repeat