Eu tenho uma diretiva que compila outra diretiva e anexa ao corpo com o mesmo escopo passado. Este não será o mesmo local que a diretiva "pai".

Quando a diretiva pai é destruída, há alguma maneira de a diretiva filho e o escopo também serem destruídos? Eu pergunto porque depois de inspecionar o DOM, a diretriz infantil ainda está lá.

Atualmente eu me conecto com o evento $ destroy dos pais, mas fiquei curioso para saber se ele poderia ser tratado automaticamente.

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

A criança fica lá enquanto você ativa o pai, mas eu gostaria de ser destruído. Qual seria o melhor método para fazer isso?

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;
    }
}

Normalmente, eu teria apenas o sub-elemento dentro do modelo da diretiva original para que ele ficasse posicionado corretamente. A questão realmente se resume em lidar com o z-index. O elemento pai está em um contêiner que pode ser rolado, de modo que o filho (em um casopersonalizadas dropdown) seria escondido / cortado se fosse maior que o container. Para combater isso, em vez disso, crio o filho real no corpo do documento e o posiciono em relação ao pai. Ele também ouviria em eventos de rolagem para se reposicionar. Eu tenho que tudo funcionando e está bem. É o que acontece quando eu preciso excluir o pai ... a criança ainda está lá.