AngularJS:监视元素的可见性 [英] AngularJS: watch element visibility

问题描述

我的身体内部有一个看不见的元素.我想在它变得可见时触发一个函数.最佳做法是什么?

I have an element inside my body which is invisible. I want to trigger a function when it become visible. What is the best practice for this?

这是示例作品的 plunker .在这段代码中，通过单击按钮，窗口应滚动到"#hiddenObj" div.但第一次单击，仅显示div，第二次窗口滚动.

here is a plunker to a sample work. In this piece of code, the window should scroll to the '#hiddenObj' div by clicking on the button. but the first click, just the div become visible and the second time the window scrolls.

推荐答案

ng-hide = false有效地将'display:none'添加到元素中，这意味着该元素在DOM中将没有任何位置可以滚动到.

ng-hide=false effectively adds 'display:none' to the element which means the element would not have any position to scroll to in the DOM.

因此，只需在元素的可见状态上设置一个$ watch，如下所示

So just set a $watch on the visible state of the element as below

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

请参见 http://plnkr.co/edit/BGBygAWdwU6zv7anx3qO?p=preview

这篇关于AngularJS:监视元素的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！