javascript - 如何 'destroy' AngularJS 中的指令？

Question

我正在使用一个指令来分离实体(例如，一个人)的逻辑。

所以我有一个人员服务，可以存储一系列人员，例如:

this.people = ["Person 1", "Person 2", "etc"];

Controller 然后注入(inject)该服务，并将数据发送到包含我的指令的模板。所以我的模板看起来像这样:

<div ng-repeat="person in people">
    <person name="person"></person>
</div>

现在，在我的指令中我有一个删除函数(通过单击指令模板中的按钮调用，它看起来像这样(People 服务也注入(inject)到指令中):

delete People.people[id];

问题是，我的指令模板的其余部分保持不变。我想在删除时完全删除该指令。这怎么可能？我尝试通过使用 ng-hide 隐藏它并在删除时将指令范围内的“已删除”属性设置为 true，但空的(无数据)指令模板仍然存在。我查看了 scope.$destroy()、element.remove() 等，但没有任何效果，文档中似乎没有任何内容真正清楚...

如何从自身内部完全销毁/删除指令(即调用删除函数时)？

fiddle :http://jsfiddle.net/VSph2/107/

点击删除，数据消失了，但指令(和模板)仍然存在，显示“名称:”。如何在删除时完全删除指令？

Answer 1

您正在删除对象，但数组中的空元素仍然存在，它只是空引用而不是指向现有对象。

使用

this.peopleIds.splice(this.peopleIds.indexOf(personId), 1);

将其从数组中移除，该元素将不再在 for 循环中呈现。

引用:How do I remove a particular element from an array in JavaScript?