I have implemented a directive to manage the logic for an entity, such as a person.
My people service contains an array of individuals:
this.people = ["Person 1", "Person 2", "etc"];
The controller injects this service and sends data to a template that includes my directive. This results in a template structure like:
<div ng-repeat="person in people">
<person name="person"></person>
</div>
Within my directive, I have a delete function triggered by a button click. The code for deleting a person looks something like this (where the People service is also injected into the directive):
delete People.people[id];
The challenge arises when trying to completely remove the directive upon deletion. Despite attempting to hide it using ng-hide or setting a 'deleted' property in the scope to true after deletion, I find that the empty directive template persists. I have explored methods like scope.$destroy(), element.remove(), but none have provided a clear solution as per the documentation...
What is the best approach to fully destroy/remove a directive from within itself when a delete function is called?
Fiddle: http://jsfiddle.net/VSph2/107/
Although clicking delete successfully removes the data, the directive and its template remain visible with just 'name:'. How can I ensure complete removal of the directive upon deletion?