Mam dyrektywę, która kompiluje inną dyrektywę i dołącza ją do ciała z takim samym zakresem. Nie będzie to ta sama lokalizacja, co dyrektywa „macierzysta”.

Kiedy dyrektywa nadrzędna zostanie zniszczona, czy jest jakiś sposób na zniszczenie dyrektywy dziecięcej i zakresu? Pytam, ponieważ po sprawdzeniu DOM dyrektywa dotycząca dzieci nadal istnieje.

Obecnie podłączam się do zdarzenia $ destroy, ale byłem ciekawy, czy można go obsłużyć automatycznie.

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

Dziecko zostaje tam, gdy przełączasz rodzica, ale chciałbym zostać zniszczony. Jaka byłaby najlepsza metoda, aby to zrobić?

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

Normalnie po prostu miałbym element podrzędny w szablonie oryginalnej dyrektywy, aby był poprawnie umieszczony. Problem sprowadza się do radzenia sobie z indeksem Z. Element macierzysty znajduje się w kontenerze, który można przewijać, więc dziecko (w jednym przypadku azwyczaj rozwijana) byłaby ukryta / odcięta, gdyby była większa niż kontener. Aby temu przeciwdziałać, zamiast tego tworzę rzeczywiste dziecko w treści dokumentu i pozycjonuję je względem rodzica. Będzie również nasłuchiwać zdarzeń przewijania w celu zmiany pozycji. Mam to wszystko działa i jest w porządku. Tak się dzieje, gdy muszę usunąć rodzica ... dziecko wciąż tam jest.