Использование $ scope. $ Destroy () после удаления директивы из dom

0

У меня есть директива, которую я переключаю с условием ng-if. Директива использует функции jqlite для добавления элементов (например, некоторой анимации) в DOM.

Но даже если директива отсутствует в DOM, запускаются функции jqlite, которые добавляют анимацию.

Я думаю, что удаление директивы с использованием ng-if недостаточно, но его область также необходимо удалить.

somepage.html - отредактировано

<directivename class="classname1" ng-if="condition">
</directivename>

directive.js

return{
controller:function($scope,$element,$rootScope){
/*adding and removing elemnts to dom */
}
}

Как точно следует использовать $ scope. $ Destroy()?

Когда я вижу значения для переменной $ element, она имеет следующий

$$hashKey: "object:336"
accessKey: ""
attributes: NamedNodeMap
baseURI: ""
childElementCount: 1
childNodes: NodeList[3]
children: HTMLCollection[1]
classList: DOMTokenList[3]
0: "classname1"
1: "ng-scope"
2: "ng-isolate-scope"
length: 3

Имя класса1 относится к имени класса, которое я дал директиве. Но эта директива отсутствует в DOM. Тем не менее $ element.classList содержит это имя класса.

Связано ли это с $ scope. $ Destroy() issue?

3 ответа

1
Лучший ответ

Вы можете использовать:

return{
controller:function($scope,$element,$rootScope){
  $scope.$on('$destroy',function(){
    /*adding and removing elemnts to dom */
  }
}
}
  • 0
    Я думал, что переменная $ element ссылается на директиву в DOM, то есть somepage.html. Если в dom нет директивы, как переменная $ element может ссылаться на нее? Почему переменная $ element не обновляется?
  • 0
    извините, нам нужно увидеть демонстрацию того, с чем у вас проблемы
2

Что такое $ destroy()?

Порядок действий в вашей директиве AngularJS важен из-за того, как jQuery реализует метод.remove(). Когда вы удаляете элемент из DOM с помощью.remove() или.empty(), jQuery очищает привязки событий и данные, связанные с элементом, чтобы избежать утечек памяти. Это означает, что если вы удалите элемент перед запуском события "$ destroy", к моменту выполнения обработчика события $ destroy элемент будет находиться в состоянии "sanitized".

и в вашей директиве вы должны называть это как

ctrl.directive('directivename', function() {
    return function(scope, element, attributes) {        
        scope.$on('$destroy', function() {
            //Code to be execute just before destroying this directive or broadcast any mesage
        });
    };
});
0

Для анимации, если вы используете какой-либо таймер (например, setInterval() или $ interval of angle), это необходимо остановить при уничтожении события. Поскольку вы не использовали изолированную область действия для директивы yoour, вы можете зарегистрировать метод destroy в самом контроллере. Очистите событие таймера в методе destroy.

$scope.$on('$destroy',function(){
    /*clear your timer here
remove the element */
  }

Если вы еще не сохранили свой таймер в любой переменной внутри директивы, вы сохраните ее в области с родителями, то есть в любой переменной контроллера, затем очистите ее под методом уничтожения.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню