元素显示上的角度观察不起作用

Angular Watch on element show not working

本文关键字：观察 不起作用 显示 元素      更新时间：2023-09-26

当元素变得可见时，我使用agler $watch来触发警报。

var scrollElement = "#hiddenObj";
$scope.$watch(function() { return $(scrollElement).is(':visible') }, function() {
     alert('hi);
});

问题是，警报在页面加载时显示，但在页面加载中，默认情况下该元素是隐藏的，并且仅在单击某个链接时显示。

为了证实我的假设，我在这段代码之前放了一个断点，在控制台中，我执行了这段代码：

$(scrollElement).is(':visible')

并返回CCD_ 2。这证实了该元素在页面加载时是不可见的。我不知道为什么警报仍然显示在页面加载中。当我点击链接，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发生更改，就会执行监视侦听器回调，而不是在true/false发生更改时执行。因此，当您的页面被加载时，您的watchExpression值将是false，侦听器将被执行。为了避免这种情况，您可以检查watchExpression:的新值

$scope.$watch(function() { return $(scrollElement).is(':visible') }, function(newVal) {
     if(newVal === true) {
        alert('Element showed');
    }     
});

第二个问题是CCD_ 9在每次对CCD_。因此，您的点击处理程序（显示/隐藏元素）必须触发$digest循环才能计算表达式，ng-click将是一个好主意。

在您的情况下，watchExpression是：

function() { return $(scrollElement).is(':visible') }
相关文章：