javascript - Why are scopes not destroyed even after $destroy is triggered? - Stack Overflow

admin管理员组

文章数量:1344238

I have made a directive that, when clicked, creates a dialog that is appended to the body using jQuery. The problem is that when the dialog is closed, the scopes are never properly cleaned up. As shown in the picture below 167 ChildScopes are preserved. Which matches the amount of items in the dialog which includes the ng-repeat directive.

I attempted to create an extremely simple version of the scenario on Plnkr. To my surprise the scopes ARE in fact being removed on each close in the Plnkr. So something, somewhere in production is causing the scopes to stay alive even after $destroy has been called.

link: ($scope, $element, $attr) ->
  $element.on 'click', () ->
      $scope.$apply () ->
        child = $scope.$new()
        template = """<span ng-controller="ListCtrl">...List dialog things...</span>"""
        piledTemplate = $pile(template)(child)
        container = containers.createDialogContainer($element)
        container.append(piledTemplate)

        #cleanup
        $scope.closeWidget = () ->
          container.trigger("container_close")
          return

        container.on "container_close", ()->
          child.$apply () ->
            child.$destroy()
          return

So here is my question:

What can cause a scope to stay alive even after $destroy has been called, triggered and garbage collection performed?

For obvious reasons I cannot show you our production code. However the directive in the Plnkr matches the one im debugging sufficiently.

I have made a directive that, when clicked, creates a dialog that is appended to the body using jQuery. The problem is that when the dialog is closed, the scopes are never properly cleaned up. As shown in the picture below 167 ChildScopes are preserved. Which matches the amount of items in the dialog which includes the ng-repeat directive.

I attempted to create an extremely simple version of the scenario on Plnkr. To my surprise the scopes ARE in fact being removed on each close in the Plnkr. So something, somewhere in production is causing the scopes to stay alive even after $destroy has been called.

link: ($scope, $element, $attr) ->
  $element.on 'click', () ->
      $scope.$apply () ->
        child = $scope.$new()
        template = """<span ng-controller="ListCtrl">...List dialog things...</span>"""
        piledTemplate = $pile(template)(child)
        container = containers.createDialogContainer($element)
        container.append(piledTemplate)

        #cleanup
        $scope.closeWidget = () ->
          container.trigger("container_close")
          return

        container.on "container_close", ()->
          child.$apply () ->
            child.$destroy()
          return

So here is my question:

What can cause a scope to stay alive even after $destroy has been called, triggered and garbage collection performed?

For obvious reasons I cannot show you our production code. However the directive in the Plnkr matches the one im debugging sufficiently.

• javascript
• jquery
• angularjs

Share Improve this question Follow edited Feb 19, 2014 at 7:53 CodePrimate asked Feb 18, 2014 at 13:46 CodePrimateCodePrimate 6,6661313 gold badges5050 silver badges8686 bronze badges 11

• 1 "To my surprise the scopes ARE in fact being removed on each close in the Plnkr. So something, somewhere in production is causing the scopes to stay alive even after $destroy has been called." --> If we can't reproduce the issue using the information you've given us, we can't solve your issue without psychic debugging. – George Stocker Commented Feb 18, 2014 at 14:43
• 1 @GeorgeStocker the thing is I'm not looking for a specific solution. I'm looking for possible answers to the question: "what can cause a scope to stay alive?". I realize that with the information given it would be impossible to pinpoint where exactly my problem lies. I was however hoping that someone out there had experienced issues with "cleaning up" angular scopes in the past and could shed some light on how the problem was resolved. – CodePrimate Commented Feb 18, 2014 at 14:47
• Destroy event as per documentation: "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.". That it is eligible for garbage collection, doesn't mean it is deleted yet. – pedromarce Commented Feb 18, 2014 at 15:04
• 1 I think this is one of those times when the debug strategy has to be cutting out half the code, seeing if it still happens, if so, cut out another half the code, etc. until you have isolated the problem to a small example. Then if you still have a question, update your question with just that portion of the code. – Katie Kilian Commented Feb 18, 2014 at 15:08
• @GeorgeStocker I think it is a genuine question, and it actually has an answer, he expects scopes to be gone by the time destroy event happens, but it doesn't, which is not unexpected, actually plunkr in this case I think it is unnecessary. – pedromarce Commented Feb 18, 2014 at 15:12

 |  Show 6 more ments

3 Answers 3

Sorted by: Reset to default 5

In general, a scope (or any other JS object) can not be cleaned up by the GC if it is still accessible by another JS object.

In practice, in an Angular project that also uses JQuery, this is most likely caused by:

• an Angular service, controller, scope or some other object still having a reference to your scope object
• a reference to your object still exists through a DOM element, probably through an event listener. The DOM element might not be GC-able itself because it is still in the cache of JQuery

Your example, for instance, creates a memory leak.

From your code:

 $scope.removeDialog = () ->
    console.log "closing"
    child.$destroy()
    $('.listshell').remove()
    return

You do not set child to null so $scope.removeDialog still has access to the scope object referenced by the child variable. Therefore, this object can not be GC'ed.

NB: It seems to me that it would be more appropriate to put removeDialog on the child scope. Now your example only works because the child scope is not isolated.

Closure functions can cause a functions Activation object to stay alive even after the scope has been "destroyed". For instance you might have inner functions still referencing variable objects in the functions whose scope you are trying to destroy.

nullifying the reference variables would be the best option as opposed to delete

The only thing I can think of is that if you somewhere have a global function or function outside of the controller or directive that references a method inside of the scope for the directive it will infact keep that scope alive for the duration of the application.

本文标签： javascriptWhy are scopes not destroyed even after destroy is triggeredStack Overflow