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

Posted 2023-02-22

【中文标题】Angular - 如何从 DOM 中删除我使用过 $compile 的元素？

【英文标题】：Angular - How can I remove from the DOM an element I have used $compile on?

【发布时间】：2013-05-23 17:26:35

【问题描述】：

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

编辑：解释

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

已解决

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

【参考方案1】：

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

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

【讨论】：

也许我不了解 Scope 的某些内容，但是如果我破坏了必须在 Controller 级别完成的元素的范围，我会破坏其中的所有内容，不是吗？我只想删除一些元素，以及它们的绑定

【参考方案2】：

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

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

【参考方案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');
            
        
    ;
);

【讨论】：

其实我现在在用angular-ui.github.io/bootstrap，他们有很多很棒的工具，而且模态组件非常棒。

是的，我也同意你的看法

我是否理解正确，如果我不创建这个新范围 modalScope = scope.$new(false); 而只是 $compile 的元素到 scope 我正在向我的 scope 添加垃圾每个新的模态。

是的，如果你不创建新的子作用域，你将使用带有父作用域的编译模态，并且模态控制器可能会添加垃圾或覆盖作用域的方法