AngularJS：在列表中重复包装元素的指令

Question

我正在尝试创建一个angular-js指令，用于封装编辑项目列表：它应该迭代一个列表，为每个项目重复指令的包装元素，并为每一行添加一些控件（删除元素，移动）周围的元素，...）。理想情况下，我想使用这样的指令：

<edit-list list="mylist">
    <input ng-model="item.name">
    <input ng-model="item.location">
</edit-list>

其中指令模板应该是这样的（作为演示我添加了一个用于删除项目的按钮）：

<div ng-repeat="item in list track by $index">
    <span ng-transclude></span><button ng-click="delete_item($index)">
</div>

然而，我无法让它发挥作用。我试图调整this answer设法在列表上重复包装的元素，但是现在的angularjs版本不再使用plunker（参见我的分叉plunker，它只更改angularjs的版本）。 / p>

尽管如此，here是一个试图实现我想要完成的东西，但是很脆弱：似乎被抄袭的元素不能再看到这个项目了。这对于ng-transclude的文档是有意义的，但我无法弄清楚如何使包装元素再次看到指令的范围。

Answer 1

我在这里更新了你的plnkr http://plnkr.co/edit/GZsfp0HaeAVg5NjMBtGC?p=preview并进行了一些更改：

1. 您的目标是通过列表ng-repeat。由于您已将列表绑定到指令，因此无需ng-transclude。

2. 我删除了指令

中对ng-transclude的引用

3. 我修改了您的delete方法以从列表中选择正确的项目。