[英]Angular Watch on element show not working
我正在使用一個敏捷的$watch
在元素變為可見時觸發警報。
var scrollElement = "#hiddenObj";
$scope.$watch(function() { return $(scrollElement).is(':visible') }, function() {
alert('hi);
});
問題是盡管頁面加載時警報會在頁面加載時顯示,默認情況下該元素是隱藏的,並且僅在單擊某些鏈接時才會顯示。
為了確認我的假設,我在此代碼之前放置了一個斷點,並在控制台中執行了以下代碼:
$(scrollElement).is(':visible')
它返回false
。 確認該元素在頁面加載時不可見。 我不知道為什么警報仍在頁面加載時顯示。 當我單擊鏈接,並且scrollElement
實際上變為可見時,什么也沒有發生。
我在這里想念什么嗎?
這些東西應該用更改范圍變量的指令(例如$ scope.elemVisible)進行編碼
.directive("visible",function(){
return{
restrict:"AE",
scope:{yourVarName:'='},
link:function(scope,elem,attrs){
$(window).scroll(function(ev){//if you want to do something on scroll
var vis=$(elem).is(':visible');
scope.yourVarName=vis;
scope.$apply();
});
$(someElement).bind('click',function(ev){// or if you want do something on click
var vis=$(elem).is(':visible');
scope.yourVarName=vis;
scope.$apply();
});
}
}
})
html
<visible yourVarName="isVisible"/>
控制者
$scope.$watch('isVisible',function(newVal,oldVal){...});
當watchExpression
更改時 ,將執行watch監聽器回調,而不是在true/false
。 因此,在加載頁面時, watchExpression
值將為false
並且將執行偵聽器。 為了避免這種情況,您可以檢查watchExpression
的新值:
$scope.$watch(function() { return $(scrollElement).is(':visible') }, function(newVal) {
if(newVal === true) {
alert('Element showed');
}
});
第二個問題是在每次調用$digest()
都會調用watchExpression
。 因此,單擊處理程序(以顯示/隱藏元素)必須觸發$ digest循環才能計算表達式, ng-click
是個好主意。
在您的情況下, watchExpression
為:
function() { return $(scrollElement).is(':visible') }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.