How to destroy a directive?

[Tanguy Krotoff]

Hi all,

I want to cleanly destroy my directive. I've found two different ways to do that: scope.$on('$destroy'...) and element.bind('$destroy'...)

app.directive('fullcalendar', ...) {

  return {

    restrict: 'A',

    link: function(scope, element) {

      // Solution 1

      scope.$on('$destroy', function() {

        console.log('scope on destroy');

        element.fullCalendar('destroy');

      });

      // Solution 2

      element.bind('$destroy', function() {

        console.log('element bind destroy');

        element.fullCalendar('destroy');

      });

      element.fullCalendar({

        ...

      });

    }

  };

}]);

How and why to use the first solution and the second solution?

Sources:

- https://groups.google.com/forum/#!topic/angular/AaEqgnxDZ3E

- http://docs.angularjs.org/guide/directive

- http://stackoverflow.com/questions/11548390/angularjs-notification-when-element-is-removed

[Tanguy Krotoff]

btw element.bind('$destroy'...) is being called before scope.$on('$destroy'...)

[Tanguy Krotoff]

Answering to myself.

I prefer to use element.on('$destroy') as my directives don't always rely on a scope.

Example for Bootstrap datepicker:

      element.on('$destroy', function() {

        element.datepicker('remove');

      });

In order to check if an element still has some jQuery events attached to it:

$._data($(elem).get(0), 'events')

See http://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object

There is also a FireBug extension for that: http://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug

[Peter Bacon Darwin]

If the element is being destroyed and a jQuery plugin is not catching that itself and removing any bindings that it added, then I would call that a bug in the plugin.

AngularJS is very good about destroying a scope that is attached to an element that is being destroyed, including any watches that were set up.

--
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-US.
 
 

[Page Brooks]

I had a similar problem where if I used the scope destroy the jQuery.data() objects were destroyed before the plugin had a chance to be destroyed. This caused problems for the plugin. Switching to element destroy fixed the problem.

[Sebastien Chartier]

From the Angular.js documentation:

"Note that, in AngularJS, there is also a $destroy jQuery event, which can be used to clean up DOM bindings before an element is removed from the DOM."

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$destroy

[Dinh Lam Viet]

.directive('myDirectiveLeak', function ($compile) {

    return {

      replace: 'AE',

      templateUrl: '<div><input type="text"></div>',

      link: function (scope, element) {

          element.datetimepicker();  //// add a Jquery plugin

      }

    };

does my directive cause a memory leak? if have how do I destroy this event? Thank you