CODEWITHSUNDEEP
angularjsdestroy
Kulwinder Singh
Kulwinder Singh

Reputation: 31

Angularjs destroy is not working

http://plnkr.co/edit/UfQJU661pQR0DMY3c61t?p=preview

I got above code from AngularJs site and only thing I have added a button to delete a Div where we have controller but after delete no destroy method called as I have put alert in Directive and Controller.

element.on('$destroy', function() {
alert('destroy directive interval');
$interval.cancel(stopTime);
});

and 

 $scope.$on('$destroy', function() {
alert('destroy controller interval');
// Make sure that the interval is destroyed too
$scope.stopFight();
});

please suggest.

Thanks

Upvotes: 3

Views: 3056

Answers (2)

mohamedrias
mohamedrias

Reputation: 18566

You're doing it outside of angular's context.

<button id="btn" onclick="DeleteMainDiv()">DeleteDiv</button>

So in your DeleteMainDiv() function

 function DeleteMainDiv() {
      alert('Controller div going to remove');
      //debugger;
      var scope = angular.element(document.getElementById("mainDiv")).scope();
      $('#mainDiv').remove();
      scope.$destroy();
    }

This will trigger the destroy functionality.

But I don't see a need of it. Angular will automatically run the $destroy event handler when the route changes or directive no longer required.

DEMO

Upvotes: 0

squiroid
squiroid

Reputation: 14017

The main thing to be noticed

When element.remove() is executed that element and all of its children will be removed from the DOM together will all event handlers attached via for example element.on.

It will not destroy the $scope associated with the element.

So you need to manually trigger scope.$destroy();

First get the scope of element:-

 var scope = angular.element(document.getElementById("mainDiv")).scope();

Second remove the element from dom:-

$('#mainDiv').remove();

Third destroy scope manually:-

 scope.$destroy();

Plunker

Upvotes: 1

Related Questions