У меня есть директива, которая выглядит так:
app.directive('mydirective', function($compile,$document){
var directive = {
restrict: 'EA',
scope:{
},
link: link,
};
return directive;
function link(scope, element, attr) {
var template_html = "<div id=\"popup\">{{popupTitle}}</div>";
var template = angular.element(template_html);
element.bind('click', function(){
if(!$("#popup").is(':visible')){
var $popup = $compile(template)(scope);
$document.find('body').append($popup);
}else{
$("#popup").remove();
}
});
template.remove();
}
});
Код работает отлично, показывая и удаляя popup-элемент при нажатии на mydirective
. Но проблема возникает каждый раз, когда элемент показывает & скрывает, угловой наблюдатель просто продолжает расти. Количество увеличения наблюдателя зависит от количества привязок в template_html
.
Как я могу заставить этих наблюдателей удаляться при удалении всплывающего окна, чтобы наблюдатели не накапливали увеличение с течением времени.
Вы пытались уничтожить область внутри блока else, когда всплывающее окно удаляется?
element.bind('click', function(){
if(!$("#popup").is(':visible')){
var $popup = $compile(template)(scope);
$document.find('body').append($popup);
}else{
$("#popup").remove();
scope.$destroy();
}
});
Чтобы создать новую область, вы можете сделать что-то вроде
var popupScope;
element.bind('click', function(){
if(!$("#popup").is(':visible')){
popupScope = $scope.$new();
var $popup = $compile(template)(popupScope);
$document.find('body').append($popup);
}else{
$("#popup").remove();
popupScope.$destory();
}
});
Храните своего watcher
в контроллере как переменную:
var myWatcher = $scope.$watch(......
И убедитесь, что ваш контроллер доступен из вашей директивы, затем вы можете вызвать myWatcher()
который отменит ваш наблюдатель, так как вызов watch
вернет несвязанную функцию.
scope.$destroy();
уничтожить все. Привязки не будут работать снова, когда они снова показывают.