zniszczy dyrektywę/zakres dla dziecka na zakresie zniszcz

Question

Mam dyrektywę, która kompiluje inną dyrektywę i dołącza ją do ciała z tym samym zakresem przekazanym. To nie będzie ta sama lokalizacja co dyrektywa "nadrzędna".

Kiedy dyrektywa nadrzędna zostanie zniszczona, czy istnieje jakiś sposób na zniszczenie dyrektywy dziecka i jej zakresu? Pytam, ponieważ po inspekcji DOM dyrektywa dla dzieci nadal istnieje.

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

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

Dziecko pozostaje tam, jak włączyć rodziców, ale chciałbym zostać zniszczone. Jaka byłaby najlepsza metoda na zrobienie tego?

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, to bym po prostu sub elementu w szablonie pierwotnej dyrektywy, tak że jest on umieszczony prawidłowo. Kwestia naprawdę sprowadza się do radzenia sobie z indeksem Z. Element nadrzędny znajduje się w kontenerze, który można przewijać, więc dziecko (w jednym przypadku menu rozwijane niestandardowe) byłoby ukryte/obcięte, gdyby było większe niż kontener. Aby to zwalczyć, tworzę rzeczywiste dziecko w ciele dokumentu i umieszczam je względem rodzica. Będzie także słuchał zdarzeń przewijania, aby zmienić pozycję. Mam to wszystko działa i jest w porządku. To się dzieje, gdy muszę usunąć rodzica ... dziecko wciąż tam jest.

Answer 1

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

aktualizowane skrzypce: http://jsfiddle.net/C8hs6/