Как удалить область компонента, внедренного из родительской директивы

Question

У меня есть директива, которая динамически добавляет дочерние пользовательские директивы в DOM на основе некоторого ввода.Все отлично работаетНо когда входные данные меняются, и я перерисовываю DOM с другим набором дочерних пользовательских директив, старые области действия дочерних пользовательских директив не удаляются, и, следовательно, прикрепленные к ним обработчики событий все еще находятся в памяти.

Я перерисовываю DOM, просто установив element [0] .innerHTML = ''.Есть ли способ удалить / уничтожить области действия пользовательской директивы?В некоторых статьях я видел, что можно вызывать область действия. $ 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

в вашей пользовательской директиве обрабатывает событие уничтожения

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