У меня есть директива, которую я переключаю с условием 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?
Вы можете использовать:
return{
controller:function($scope,$element,$rootScope){
$scope.$on('$destroy',function(){
/*adding and removing elemnts to dom */
}
}
}
Что такое $ 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
});
};
});
Для анимации, если вы используете какой-либо таймер (например, setInterval() или $ interval of angle), это необходимо остановить при уничтожении события. Поскольку вы не использовали изолированную область действия для директивы yoour, вы можете зарегистрировать метод destroy в самом контроллере. Очистите событие таймера в методе destroy.
$scope.$on('$destroy',function(){
/*clear your timer here
remove the element */
}
Если вы еще не сохранили свой таймер в любой переменной внутри директивы, вы сохраните ее в области с родителями, то есть в любой переменной контроллера, затем очистите ее под методом уничтожения.