簡體   English   中英

Angular Watch在元素上顯示不起作用

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM