スコープ内のディレクティブ/子スコープを破棄します。

Question

私は別のディレクティブをコンパイルし、同じスコープで継承するディレクティブをボディに付加します。これは "parent"ディレクティブと同じ場所にはなりません。

親ディレクティブが破棄されると、子ディレクティブとスコープも破壊されるいくつかの方法がありますか？私は、DOMを調べた後、子供の指示がまだ残っているからです。

現在、私は親の$ destroyイベントにフックしますが、自動的に処理できるかどうか不思議です。

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

子供は親を切り替えるとしてそこにとどまるが、私が破壊されるようにしたいと思います。それを行う最良の方法は何でしょうか？

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

通常、それが正しい位置にいますように、私は、元のディレクティブのテンプレート内のサブ要素を持っていると思います。問題は実際にはz-indexを扱うことになります。親要素はスクロール可能なコンテナ内にあるため、子が（1つのケースではカスタムドロップダウン）、コンテナより大きい場合は隠されたり途切れたりします。これに対抗するために、代わりに実際の子をドキュメント本文に作成し、それを親に対して相対的に配置します。また、スクロールイベントをリスンして自身の位置を変更します。私はそれがすべて働いており、ちょうどいいです。それは私が親を削除する必要があるときに起こることです...子供はまだそこにあります。

Answer 1

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

更新フィドル：http://jsfiddle.net/C8hs6/