javascript - 元素上的 Angular Watch 显示不起作用

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"/>

Controller

$scope.$watch('isVisible',function(newVal,oldVal){...});