2

I've been writing lots of Angular directives recently and have been reading about having to manually remove things you create in a directive when it is destroyed. It's still a little unclear though.

I know that anything palced on $scope is destroyed, but what about local variables, arrays, functions etc created in a directive's controller?

Here is some example code from my app

angular.module('myModule').controller('s4pFileUploadCtrl', function($scope, $element, $attrs, FileUploader){

    var self = this;

    self.uploader = new FileUploader({
        settings: {}
    });

    // Elsewhere in the controller
    var reader = new FileReader();      
    reader.onload = onLoadFile;

    function onLoadFile(event) {
        var img = new Image();
        img.onload = onLoadImage;
    }

});

This is a contrived and very much cut down function, but do I need to remove the uploader on $scope destroy event? DO i need to do anything about the FileReader and it's associated onLoadFile event?

Any help would be appreciated. I've read loads of articles about cleaning up directives but none of them mention things like this.

2 Answers 2

4
+50

Here's a great article for some background on javascript memory management and garbage collection more generally. Basically, it works something like this...

Javascript memory management - garbage collector

Memory will be allocated for an object when created:

var o = {iThink: 'thereforeIAm'}; // memory allocated for an object and a string

You may then console.log(o.iThink) and 'thereforeIAm' will be read from its place in memory and printed to the console.

If you wanted to create a new string and lost the need for the {iThink: 'thereforeIAm'} object, you may decide to overwrite o instead of introducing a new variable e.g:

o = 'helloImANewString';

Fortunately, references (or lack thereof) send a clear message internally to javascript's garbage collector as to whether a piece of (finite) memory should remain allocated or freed to perform other tasks. In this case, no reference remains to the object and string previously allocated for {iThink: 'thereforeIAm'} and the corresponding memory may be freed (i.e. "garbage-collected") as result.

Importantly, note that garbage collection happens internally. No code has to be written by you to that effect. All you need to concern yourself with is the value of o and the garbage collector can infer need, more or less, from remaining reference.

Angular memory management - $scope.$destroy

Unfortunately, the cleanup tasks related to $scope removal cannot be inferred by the javascript garbage collector based on reference alone; additional code is required.

That is because $scope objects embody a concept more complex than any ol' javascript object. In particular, when no use remains in your application for a certain $scope object, no use must also remain for any associated $$watchers previously registered with the $scope.$watch method and no use must also remain for "children" $scope objects. The javascript garbage collector cannot infer this relationship from simple reference removal e.g:

$scope = null; // $scope object will be garbage collected, but nothing else

In other words, the garbage collector has to be told what to do, which is exactly what the $scope.$destroy method does. Note these lines in particular:

$scope.$parent = $scope.$$nextSibling = $scope.$$prevSibling = $scope.$$childHead =
    $scope.$$childTail = $scope.$root = $scope.$$watchers = null;

Now to answer your question

I know that anything placed on $scope is destroyed, but what about local variables, arrays, functions etc created in a directive's controller?

Yes, but not directly by the $destroy method.

When a function is invoked, the memory allocated for internally scoped objects will only remain allocated to the extent references remain past the life of the invocation.

In the example of your controller, in fact, no references remain to reader at all after the controller function is run whether or not $scope is $destroy'ed. But even if you did attach it to $scope as you did with uploader, the only remaining reference thereto results from such attachment to $scope. Consequently, any call to $scope.$destroy() would remove the last reference to uploader (by removing any reference to $scope) and render it eligible for javascript garbage collection.

4
  • Thank you, that's a very comprehensive answer. I just want to be sure of one thing though... When you say I attached the uploader to $scope, I actually attached it to self which is equal to "this" e.g. the controller itself. I specifically wanted to know what happens to things that are attached to the controller. I assume that the controller itself is destroyed when the associated directive is removed from the document, but I wanted to be sure. Basically, it sounds like I need to do nothing here.
    – jonhobbs
    Apr 3, 2016 at 21:37
  • 1
    By attaching uploader to this, you actually indirectly did attach it to $scope because this (i.e. the controller) is attached to $scope. Yes, the reference to the controller is destroyed and you don't need to do anything here.
    – jbmilgrom
    Apr 3, 2016 at 21:44
  • Actually "these lines in particular" have nothing to do with garbage collection. The comment clearly says "disable", not clean up. It would also contradict you own example. Apr 4, 2016 at 13:31
  • @zeroflagL That's a good point, thanks for catching. Changing to the correct lines
    – jbmilgrom
    Apr 4, 2016 at 14:35
1

When $scope.$destroy() is executed it will remove all listeners registered via $on on that $scope.

It will not remove DOM elements or any attached event handlers.

if element.remove() is called on the element then all of its children will be removed from the DOM together will all event handlers attached via element.on but it will not destroy the $scope associated with the element.

1
  • You did not answer the question. Apr 4, 2016 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.