当模板包含另一个ngRepeat时，angularjs ngRepeat留下html

Question

我有一个控制器，其中包含一组人员 ma​​inCtrl.People。每个人都有一组电话号码。

index.html

<div ng-repeat="people in mainCtrl.People">
    <ng-person data-json-pack={{people}}></ng-person>
</div>

我的人的模板显示姓名和电话号码列表，如下所示：

<div class="border">
    <p>{{personCtrl.Name}}</p>
    <div ng-repeat="telno in personCtrl.TelNos">
        <p>{{telno}}</p>
    </div>
</div>

当我向 mainCtrl.People 添加一个元素时，会出现一个新指令。

当我拼接一个元素时，大部分指令都消失了，但留下了一些位：

<div class="border ng-isolate-scope">
     <p>{{personCtrl.Name}}</p>
     <!-- ngRepeat: telno in personCtrl.TelNos -->
</div>

我知道 angularjs 可以将 html cmets 抛在后面，但在这种情况下，它不仅仅是 cmets。用户可以看到它是一个空边框。

当重复的模板中有重复时会发生这种情况。我做错了什么？

2014 年 9 月 9 日编辑

这是一个演示问题的 plunker：

http://plnkr.co/edit/RQiMww1Rl8gzG6W5COuT?p=preview

演示是一个带有产品列表的商店模块。该按钮从列表中删除最后一个产品。它只工作一次！

Answer 1

我会假设 - 这是一个假设等待您提供更多信息 - 与指令的绑定是问题。

你可能正在做类似的事情

scope: {
  jsonPack: '@'
}

从外观上看，获取一个字符串并从中解压缩 json？同样，如果没有更多代码，不确定。

设置双向绑定

scope: {
  jsonPack: '='
}

直接获取对象（无需转换为 json 进行运输）应该可以解决您的问题。

此外，您必须将您的 html 更改为 <ng-person data-json-pack="person">，这会将您的指令原样发送到整个 person 对象。

让我知道它是否有效，或者以我的方式发送更多信息。

编辑：在上面的 plunk 中，你正在做：

this.model.products.splice(this.model.products.length - 1, 1, null);

这意味着您要插入null 来代替最后删除的产品。这将告诉 Angular 尝试将最后一个数组项呈现为产品。你应该做的是：

this.model.products.splice(this.model.products.length - 1, 1);

这只是意味着从 products 数组中删除最后一个元素。问题不在于渲染，而在于您最终的模型修改。