parand87 parand87 - 8 months ago 191
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

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