destroy directive/child scope on scope destroy

All we need is an easy explanation of the problem, so here it is.

I have a directive that compiles another directive and attaches it to the body with the same scope passed. This will not be the same location as the “parent” directive.

When the parent directive gets destroyed is there some way to have the child directive and scope destroy as well? I ask because after inspecting the DOM the child directive is still there.

Currently I hook into the parents $destroy event but was curious if it could be handled automatically.

jsFiddle: http://jsfiddle.net/FPx4G/1/

The child stays there as you toggle the parent, but i’d like to to be destroyed. What would be the best method to do that?

html:

<div ng-app="app">
    <div ng-controller="ParentCtrl">
        <button data-ng-click="toggleParent()">Toggle Parent</button>
        <div data-ng-switch data-on="displayDirective">
            <div data-ng-switch-when="true">
                <div class="parentDirective">Parent Directive</div>
            </div>
        </div>
    </div>
</div>

javascript:

angular.module('app', [])
    .directive("parentDirective", function($compile){
        return {
            restrict: 'C',
            link: function(scope, element){
                var secondDirective = angular.element(document.createElement("div"));
                secondDirective.addClass("childDirective");

                document.body.appendChild(secondDirective[0]);

                $compile(secondDirective)(scope);
            }
        }
    })
    .directive("childDirective", function(){
        return {
            restrict: 'C',
            template: '<div>Child Directive</div>',
            link: function(scope, element){
                scope.$on("destroy", function(){
                   alert(1); 
                });
            }
        }
    });


function ParentCtrl($scope){
   $scope.displayDirective = true;
    $scope.toggleParent = function(){
        $scope.displayDirective = !$scope.displayDirective;
    }
}

Normally, I’d just have the sub element within the original directive’s template so that it’s positioned correctly. The issue really comes down to dealing with z-index. The parent element is in a container that can be scrolled, so the child (in one case a custom dropdown) would be hidden/cut off if it was larger then the container. To combat this I instead create the actual child in the document body and position it relative to the parent. It would also listen in on scroll events to reposition itself. I have that all working and is just fine. It’s what happens when I need to delete the parent… the child is still there.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

directive("childDirective", function(){
    return {
        restrict: 'C',              
        template: '<div >Child Directive</div>',                
        link: function(scope, element){                  
            scope.$on("$destroy",function() {
                element.remove();
            }); 
        }
    }
});

updated fiddle : http://jsfiddle.net/C8hs6/

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply