Ich habe eine Direktive, die eine andere Direktive kompiliert und sie mit demselben Gültigkeitsbereich an den Body anfügt. Dies ist nicht derselbe Speicherort wie die übergeordnete Anweisung.

Wenn die übergeordnete Direktive zerstört wird, gibt es eine Möglichkeit, die untergeordnete Direktive und den Gültigkeitsbereich ebenfalls zu zerstören? Ich frage, weil nach der Inspektion des DOM die Kinderrichtlinie noch da ist.

Momentan habe ich mich an das $ destroy-Event der Eltern angeschlossen, war aber neugierig, ob es automatisch gehandhabt werden kann.

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

Das Kind bleibt dort, während Sie das Elternteil umschalten, aber ich möchte zerstört werden. Was wäre die beste Methode, um das zu tun?

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

Normalerweise würde ich nur das Unterelement in der Vorlage der ursprünglichen Direktive haben, damit es richtig positioniert ist. Das Problem hängt wirklich mit dem Umgang mit Z-Index zusammen. Das übergeordnete Element befindet sich in einem Container, der gescrollt werden kann, also das untergeordnete Element (in einem Fall aBrauch Dropdown) würde ausgeblendet / abgeschnitten, wenn es größer als der Container wäre. Um dem entgegenzuwirken, erstelle ich stattdessen das eigentliche untergeordnete Element im Dokumentkörper und positioniere es relativ zum übergeordneten Element. Es würde auch Scroll-Ereignisse abhören, um sich neu zu positionieren. Ich habe das alles funktioniert und ist in Ordnung. Das passiert, wenn ich den Elternteil löschen muss ... das Kind ist immer noch da.