Question

我有一个指令，该指令可根据某些输入向DOM动态添加子自定义指令。一切正常。但是，当输入发生更改并且我使用一组不同的子自定义指令重新渲染DOM时，不会删除子自定义指令的旧范围，因此，附加到它们的事件处理程序仍在内存中。

我仅通过设置element [0] .innerHTML =”重新呈现DOM。有没有一种方法可以删除/销毁自定义指令的作用域？我在一些文章中看到了scope。$ destroy可以被调用，但是如何获得对子自定义指令范围的引用？

const linker = function (scope, element) {
scope.$watch('data', function () {
    reRenderToolbar();
}, true);

const reRenderToolbar = function () {
    element[0].innerHTML = '';
    _.forEach(scope.data, function (item, key) {
        const directive = item.CustomDirective;
        scope.options = item.options || {};
        html = '<' + directive + ' options="options"></' + directive + '>';
        element.append(html);
    }


   });
}

    $compile(element.contents())(scope);
    };

Answer 1

问题在于，由于我的应用程序是多范围的，因此我没有销毁父级中的子范围。本文对我有帮助http://www.mattzeunert.com/2014/11/03/manually-removing-angular-directives.html 代码：

    const linker = function (scope, element) {
scope.$watch('data', function () {
    reRenderToolbar();
}, true);
let childScope;

const reRenderToolbar = function () {
if(childScope) {
childScope.$destroy();
}
    element[0].innerHTML = '';
    _.forEach(scope.data, function (item, key) {
        const directive = item.CustomDirective;
        scope.options = item.options || {};
        html = '<' + directive + ' options="options"></' + directive + '>';
        element.append(html);
    }

   });
}


    childScope = scope.$new()
    $compile(element.contents())(childScope);
    };

Answer 2

在自定义指令上处理destroy事件

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

如何从父指令中删除注入的组件范围

2 个答案: