角度 - $ compileを使用した要素をDOMからどのように削除できますか？

Question

私が必要とするのは、2つのng-viewsの機能です。なぜなら、何かのinnerHTMLを変更してコンパイルすることができないからです。私が持っている問題は、コンテンツをもう一度変更してコンパイルすることができますが、独自のバインドを取り除くことですか、手動で行う必要がありますか？

編集：私は、その内容私が変更と異なるスコープ（したがって$コンパイル）と結合することができるモーダルを、作りたい

説明します。しかし、私はモーダル全体を破壊し、その内容の一部を破壊し、別のものに変更したくありません。私の主な疑問は、コンパイルされたHTMLを取り除くことによってメモリリークを引き起こす可能性があるということです。

はこの問題について

を解決し、私は新しい子スコープ（$新しいと）を作成し、私は内容を変更したときに、それを破壊しました。 ありがとうございました

Answer 1

この問題の解決策は、新しい子スコープを作成しています。親スコープのすべてのバインディングは、スコープの継承のために機能します。コンテンツを変更する必要があるときは、単にメモリリークを避けて子スコープを破棄します。

私も作ったとpolutingのQUEの親スコープを避けるために、子スコープのgetterメソッドとsetterメソッドは、ケース内の他のコンテンツは、あなたの良い解決策のために

Answer 2

要素を手動で削除するには、element.remove()を実行してください。コンパイルされた要素の範囲を破棄したいので、指示があるかどうかに応じて、scope.$destroy();または$scope.$destroy();を実行して、そうすることもできます。

http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

Answer 3

おかげで使い捨ての変数を使用しています。私はちょうどいくつかの実装コードを投稿しました

.directive('modal', function($templateCache, $compile) { 
    return function(scope, element, attrs) { 
     var currentModalId = attrs.modalId; 
     var templateHtml = $templateCache.get(attrs.template); 
     var modalScope, modalElement; 

     scope.$on('modal:open', function(event, modalId) { 
      if(modalId == null || currentModalId === modalId) { 
       openModal(); 
      } 
     }); 

     scope.$on('modal:close', function(event, modalId) { 
      if(modalId == null || currentModalId === modalId) { 
       closeModal(); 
      } 
     }); 

     function openModal() { 
      // always use raw template to prevent ng-repeat directive change previous layout 
      modalElement = $(templateHtml); 

      // create new inherited scope every time open modal 
      modalScope = scope.$new(false); 

      // link template to new inherited scope of modal 
      $compile(modalElement)(modalScope); 

      modalElement.on('hidden.bs.modal', function() { 
       if(modalScope != null) { 
        // destroy scope of modal every time close modal 
        modalScope.$destroy(); 
       } 
       modalElement.remove(); 
      }); 

      modalElement.modal({ 
       show: true, 
       backdrop: 'static' 
      }); 
     } 

     function closeModal() { 
      if(modalElement != null) { 
       modalElement.modal('hide'); 
      } 
     } 
    }; 
});