parand87 parand87 - 1 year ago 356
AngularJS Question

AngularJS: watch element visibilty

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?

here is a plunker to a sample work. In this piece of code, the window shoud 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.

sjm sjm
Answer Source

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.

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() {


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download