当通过templateUrl加载指令模板时,ng-repeat不绑定

Question

我被困在这几个小时和几个小时 - 有人可以帮忙吗？

我有一个嵌套指令列表,我正在通过ng-repeat迭代.这些指令的模板相当厚实,所以我将它们模块化为单独的HTML文件并通过templateUrl加载它们,但这似乎打破了数据绑定.

我在这里复制了这个问题: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)
            };
        }
    };
});

任何人都可以告诉我为什么删除按钮在第二个列表中不起作用,当我所做的只是将指令构造从模板更改为templateUrl？

Answer 1

此问题似乎与https://github.com/angular/angular.js/issues/2151上报告的错误有关

要解决它,只需不要放置ngRepeat和使用templateUrl相同元素的指令; 相反,ngRepeat放在一个包装器上:

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