Что делать, прежде чем удалять элемент DOM в AngularJS?

Question

Я помню, как слышал о необходимости уничтожить область действия над элементом, прежде чем удалять ее из DOM. Но я не совсем уверен, как это делается.

Так получилось, что у меня есть директива, которая удаляет элемент из DOM. Урезанная версия будет выглядеть так:

(function() { 
    angular.module('app').directive('remove', function() { 
     return { 
      restrict: 'A', 
      link: function(scope, element, attrs) { 
       element.children().remove(); 
       element.remove(); 
      } 
     } 
    }]); 
}()); 

Простой и непрактичный пример может быть что-то вроде <my-directive-with-isolated-scope remove></my-directive-with-isolated-scope>

я могу удалить элемент, но это не похоже, сфера разрушается, что я верят, что это создаст утечку памяти? Я также установил $interval в контроллере директивы (один с изолированной областью), где я установил консольное сообщение для выхода в качестве теста. И я вижу, что когда он удаляется из DOM, он все равно выдает консольное сообщение с заданным интервалом.

Могу ли я изменить что-то в директиве выше, чтобы правильно удалить элемент?

Answer 1

Если элемент сгенерирован из области действия, вы должны уничтожить его, удалив данные области и разрешив его повторное рендеринг, не используя операцию DOM. Данные области не связаны с самим элементом DOM, этот элемент является тем, что получает рендеринг на основе области. Поэтому удаление элемента не повлияет на переменные области видимости.

Вы не должны использовать директиву для этого; Вместо этого измените или удалите значение из области.

Answer 2

Пару экспериментов для вас, чтобы попытаться с разрушением элементов/Область применения:

Вы можете сделать тест, чтобы увидеть, когда сфера разрушается, как это:

scope.$on('$destroy', function(){ 
    console.log('Scope Destroyed!'); 
}); 

Вы можете также проверить элемент является разрушится

element.on('$destroy', function(){ 
    console.log('Element Destroyed!'); 
}); 

(смотрите События раздел angular.element docs)

Теперь о промежутке:

$interval будет работать, пока вы $interval.cancel() это, существует ли область или нет (если обратный вызов не является некоторая функция связана с scope в этом случае обратного вызова может оказаться неопределенным и Я не совсем уверен, как это делает $interval).

Если директива работает под $interval функцию, вы можете иметь что-то вроде:

var count = 0; 
var timer = 
    $interval(function doingStuff() { 
     console.log(count + ' seconds ...'); 
    }, 1000); 

scope.$on('$destroy', function cleanup() { 
    $interval.cancel(timer); 
}); 

О необходимости вручную уничтожить области:

Если вручную создать область с помощью var myScope = $scope.$new(); это ваша ответственность уничтожить его через myScope.$destroy();. Я бы сказал, что это более продвинутое использование, и я не могу придумать какие-либо общие причины для создания новой области вручную.(Возможно, если ваша директива, чтобы создать элемент и $compile его с совершенно новой областью)

Answer 3

директивы, такие как ng-view, ng-if, ng-repeat, ng-include и т.д., которые добавляют элементы в DOM, первый создать дочернюю область, а используйте службу $compile для компиляции и связывания этих элементов с этой дочерней областью, прежде чем присоединять их к DOM. Эти скомпилированные элементы связаны с созданной дочерней областью. Когда эти директивы впоследствии удаляют эти элементы, они также уничтожают область действия ребенка.

Чтобы создать дочерний объем:

var childScope = scope.$new(); 

Чтобы разрушить эту детскую сферу:

childScope.$destroy(); 

Для получения дополнительной информации см AngularJS rootScope.scope API Reference.