当指令模板通过 templateUrl 加载时，ng-repeat 不绑定 [英] ng-repeat not binding when directive template is loaded via templateUrl

问题描述

我已经被困在这个问题上好几个小时了 - 有人可以帮忙吗?

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

我有一个嵌套指令列表，我正在通过 ng-repeat 对其进行迭代.这些指令的模板相当庞大，因此我将它们模块化为单独的 HTML 文件并通过 templateUrl 加载它们，但这似乎破坏了数据绑定.

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.

我在这里复制了这个问题:http://plnkr.co/edit/72HUb0vhtpYWuRHnlq3b?p=预览

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

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?

推荐答案

此问题似乎与 https://github.com/angular/angular.js/issues/2151

要解决此问题，只需不要将 ngRepeat 和使用 templateUrl 的指令放在同一元素上；相反，将 ngRepeat 放在包装器上:

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

这篇关于当指令模板通过 templateUrl 加载时，ng-repeat 不绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！