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