javascript - Angular - 如何从 DOM 中删除我使用过 $compile 的元素？

Question

我需要的是两个 ng-views 的功能。因为我不能改变某些东西的 innerHTML 并编译它。我遇到的问题是，当我再次更改内容时，我可以编译，但是角度是否会自行删除绑定，或者我必须手动进行，如果是，如何？

编辑：解释

我想制作一个模式，我可以更改其内容并将其绑定到不同的范围（因此 $compile）。但是我不想破坏整个模态，只是破坏其中的一些内容，然后更改为另一个。我的主要疑问是通过删除一些已编译的 HTML 是否会导致内存泄漏。

解决了

对于这个问题，我创建了一个新的子范围（使用 $new）并在我更改内容时将其销毁。感谢一切

Answer 1

要手动删除元素，请执行element.remove(). 听起来您还想破坏已编译元素的范围，因此您也可以通过执行scope.$destroy();或$scope.$destroy();取决于您是否在指令中来做到这一点。

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

Answer 2

谢谢你的好解决方案。我刚刚发布了一些实现代码

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

Answer 3

这个问题的解决方案是创建一个新的子范围。由于作用域继承，所有与父作用域的绑定都有效。当我需要更改内容时，我只需销毁子范围，避免内存泄漏。

我还为子范围创建了 getter 和 setter 方法，以避免污染 que 父范围，以防其他内容使用一次性变量