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/

相关文章:

javascript - 从输入框、Javascript、getElementById 获取值

javascript - 下载的aspx网站显示不正常

javascript - 请求处理程序无法使用 Vision 插件渲染 View

javascript - 使用 momentJs 根据 Locale 获取一周的第一天

javascript - 异步等待回调不是函数

javascript - 如何为折线图添加渐变背景 [vue-chart.js]

javascript - 两个插件。两者在同一元素上都有单击事件,但其中一个取消了另一个

jQuery 切换幻灯片动画

javascript - jQuery - 覆盖事件?

javascript - 从 Swift 更新 Javascript 值