Question

我使用agular $watch在元素可见时触发警报。

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

问题是在页面加载时页面加载时会显示警报，默认情况下该元素是隐藏的，只有在点击某个链接时才会显示。

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

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

然后返回false。这证实了元素在页面加载时是不可见的。我不知道为什么在页面加载时仍然显示警报。当我点击链接时，scrollElement实际上变得可见，没有任何反应。

我在这里找不到任何东西？

Answer 1

这些东西应该在更改范围变量的指令中编码，如$ 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){...});

Answer 2

只要Map<string,int> 更改，就会执行监听侦听器回调，而不是watchExpression时。因此，当您的页面加载时，true/false值将为watchExpression，并且将执行侦听器。为避免这种情况，您可以检查false的新值：

watchExpression

第二个问题是每次调用$digest()时都会调用$scope.$watch(function() { return $(scrollElement).is(':visible') }, function(newVal) { if(newVal === true) { alert('Element showed'); } });。因此，您的点击处理程序（显示/隐藏元素）必须触发$ digest循环才能评估表达式，watchExpression将是一个好主意。

在您的情况下，ng-click是：

watchExpression

Angular Watch元素显示不起作用

2 个答案: