我有一个指令，可以根据某些输入将子级自定义指令动态添加到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);
};
问题是由于我的应用程序是多范围的，因此我没有销毁父级中的子范围。本文对我有帮助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);
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句