I'm using a directive to separate the logic for an entity (for example, a person).
So I have a people service that stores an array of people like:
this.people = ["Person 1", "Person 2", "etc"];
The controller then injects that service, and sends data to a template that contains my directive. So my template looks something like:
<div ng-repeat="person in people">
<person name="person"></person>
</div>
Now, in my directive I have a delete function (called by clicking a button in the directive's template, which looks something like this (People service also injected into directive):
delete People.people[id];
The problem is, the rest of my directive's template remains intact. I want to remove the directive completely upon deletion. How is this possible? I've tried hiding it by using ng-hide and setting a 'deleted' property in the directive's scope to true upon deletion, but the empty (without data) directive template remains. I've looked into scope.$destroy(), element.remove(), etc, but nothing has worked and nothing seems really clear in the documentation...
How can I destroy/remove a directive completely from within itself (i.e. upon calling a delete function)?
Fiddle: http://jsfiddle.net/VSph2/107/
Click delete and the data is gone, but the directive (and template) remains, showing 'name:'. How can I remove the directive completely on delete?