当指令模板通过templateUrl装载NG重复没有约束力 [英] 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-重复迭代的列表。这些伪指令的模板是相当笨重的，所以我已经模块化的他们到单独的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 = preVIEW

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?

推荐答案

此问题似乎与在<报告的错误href=\"https://github.com/angular/angular.js/issues/2151\">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>

普拉克： http://plnkr.co/edit/BapWX0LpqkcLFegq1fhU

这篇关于当指令模板通过templateUrl装载NG重复没有约束力的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！