web-dev-qa-db-ja.com

Angular-$ compileを使用した要素をDOMから削除するにはどうすればよいですか？

必要なのは、2つのngビューの機能です。何かのinnerHTMLを変更してコンパイルしたくないので。私が持っている問題は、コンテンツを再度変更するとき、コンパイルできますが、angularそれ自体でバインディングを削除するか、そうであれば、手動でそれを行う必要がありますか？

編集：説明

モーダルを作成したいのですが、その内容を変更して異なるスコープにバインドできます（したがって$ compile）。しかし、モーダル全体、そのコンテンツの一部だけを破棄し、別のものに変更したくありません。私の主な疑問は、コンパイル済みのHTMLを削除することでメモリリークが発生する可能性があるかどうかです。

解決済み

この問題のために、新しい子スコープ（$ newを使用）を作成し、コンテンツを変更するたびにそれを破棄しました。どうもありがとう

javascriptdomangularjs
21
donnanicolas

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

また、他のコンテンツが使い捨て変数を使用する場合に、que親スコープを汚染しないように、子スコープのgetterおよびsetterメソッドを作成しました

3
donnanicolas

要素を手動で削除するには、element.remove()を実行します。コンパイルされた要素のスコープも破棄したいように思えます。そのため、ディレクティブを使用しているかどうかに応じて、scope.$destroy();または$scope.$destroy();を実行することでもできます。

http://docs.angularjs.org/api/ng.$ro​​otScope.Scope#$destroy

20
Mathew Berg

良い解決策をありがとう。実装コードを投稿しました

.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');
            }
        }
    };
});
9
Duy Tran