Can someone provide an example of a $destroy event for scopes in AngularJS?

Question

Can someone please provide an example of scope's $destroy event? Here is the reference documentation from http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

$destroy()

Removes the current scope (and all of its children) from the parent scope. Removal implies that calls to $digest() will no longer propagate to the current scope and its children. Removal also implies that the current scope is eligible for garbage collection.

The $destroy() is usually used by directives such as ngRepeat for managing the unrolling of the loop.

Just before a scope is destroyed a $destroy event is broadcasted on this scope. Application code can register a $destroy event handler that will give it chance to perform any necessary cleanup.

score 108 · Accepted Answer · answered Jan 19 '13 at 17:30

108

Demo: http://jsfiddle.net/sunnycpp/u4vjR/2/

Here I have created handle-destroy directive.

ctrl.directive('handleDestroy', function() {
    return function(scope, tElement, attributes) {        
        scope.$on('$destroy', function() {
            alert("In destroy of:" + scope.todo.text);
        });
    };
});

answered Jan 19 '13 at 17:30

SunnyShah

28,934
30
90
137

4

In this example, and using Batarang, the scope for the destroyed element is still there. Isn't that a memory leak? – sidonaldson Oct 18 '13 at 12:18
4

The scope is not destroy, the documentation says: "Removal also implies that the current scope is eligible for garbage collection." So that in the next gc run that scope will cease to exist – Nickydonna Oct 29 '13 at 11:55

score 21 · Answer 2 · edited Jun 14 '18 at 19:10

$destroy can refer to 2 things: method and event

1. method - $scope.$destroy

.directive("colorTag", function(){
  return {
    restrict: "A",
    scope: {
      value: "=colorTag"
    },
    link: function (scope, element, attrs) {
      var colors = new App.Colors();
      element.css("background-color", stringToColor(scope.value));
      element.css("color", contrastColor(scope.value));

      // Destroy scope, because it's no longer needed.
      scope.$destroy();
    }
  };
})

2. event - $scope.$on("$destroy")

See @SunnyShah's answer.

Can someone provide an example of a $destroy event for scopes in AngularJS?

2 Answers2

1. method - $scope.$destroy

2. event - $scope.$on("$destroy")

Linked

Related