我有一个指令,看起来像这样:
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();
}
});
当单击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
将返回一个未绑定的函数。