通过 templateUrl 加载指令模板时，ng-repeat 不绑定答案

【问题标题】：ng-repeat not binding when directive template is loaded via templateUrl通过 templateUrl 加载指令模板时，ng-repeat 不绑定
【发布时间】：2013-08-14 15:42:42
【问题描述】：

我已经为此困扰了好几个小时 - 有人可以帮忙吗？

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

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

HTML：

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

项目.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？

【问题讨论】：

您应该在帖子中包含相关的代码示例，以使问题自成一体。
抱歉，没有看到plunker真的很难总结问题......
有一个 plunk 完全没问题，但您应该始终在您的问题中包含相关代码。
好的，我明白了，谢谢

标签： angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

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

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

HTML：

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

项目.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】：

这是一个已知的错误，请点击这些链接。您可以使用您编写的其他版本作为解决方法。

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

【讨论】：