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

标签 javascript jquery html angularjs

我使用 agular $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"/>

Controller

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

关于javascript - 元素上的 Angular Watch 显示不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38492430/

相关文章:

jquery - 如何在 Jquery 中保留选项卡的状态?

JavaScript &lt;!--//--> 是必需的吗?

javascript - HTML 链接检查 Internet 连接

javascript - 为什么没有设置线宽?

javascript - e.preventDefault - e 未定义

javascript - 记录和存储高分辨率手绘图

javascript - 使数据属性表现得像 anchor

javascript - 内联 javascript onclick 事件

php - .ajax跨域和mysql函数不能正常运行

javascript、jQuery 和 ajax 函数在 asp.net MVC 中无法正常工作