How to destroy custom components?

[numan]

FYI: I am a newbie to angularjs.

My understand so far is that directive are the way to go to create reusable custom components. But what I haven't seen so far from the docs is any mention of component lifecycle.

For example:

Lets say I am building a complex application with many directives some of which are composed into higher level widgets. Now lets say I want to delete one of these higher level components.

This would involve freeing up the dom and clearing all the event handlers - recursively for each of the subcomponents.

Is that something that angularjs framework addresses or would I need to do this manually?

[numan]

anybody?

[Andy Joslin]

Hi numan,

If your components have isolated scopes, you can listen for the '$destroy' event on the scope for when the directive is destroyed.

If you use angular-ui (http://angular-ui.github.com), there's an if directive that you can use to easily create/destroy a component.

Example: http://plnkr.co/edit/fMt4xy 

[Andy Joslin]

The if directive does have a small bug right now, though.. it broadcasts $destroy even while creating.  I opened an issue for it.   https://github.com/angular-ui/angular-ui/issues/144

[numan]

Thanks for your reply Andy.

$destory seems to destroy just the scope. 

What about the dom and the event handlers?  It seems that one would have to do that manually, correct me if i am wrong?

[Andy Joslin]

numan,

that's what the 'if' directive does. It removes things form the DOM or adds them depending on the condition. 

[Witold Szczerba]

What do you mean exactly by freeing up the DOM and clearing all the
event handlers? Especially about the handlers. As far as I know there
is no need to remove events from destroyed DOM elements or am I wrong?
For example: create a template and include it on your page using
ng-include like:

<button ng-click='toggle()' value='click me to toggle'>
<ng-include src='template'></ng-include>

function Controller($scope) {
$scope.template = '';
$scope.toggle = function() {
$scope.template && 'myTemplate' || '';
}
}

Now, clicking the button makes your template appear and disappear. If
your template has components, controllers and what-else, then (as far
as I know) there is no need for any special treatment.

Regards,
Witold Szczerba

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

[Eddie Huang]

angular has hook into jquery that clean up the handlers (eg, the live ones), when scope is destroyed.

If you have custom hooks, then you need to listen for the destroy event and clean up your hooks.

[numan]

Yes you have to remove event handlers and other meta data that might be attache to the dom node otherwise you will get a memory leak esp with older versions of IE.

Jquery remove does something like that: http://api.jquery.com/remove/

[numan]

Just looked at the source. You are using jquery remove to cleanly remove the dom subtree and also destroying the scope. Makes sense. Thanks!