I have an Ionic app that has a scrolling view like this:
<div ng-repeat="post in posts" >
<div id="my-image-{{$index}}" is-visible><img src="post.img" /></div>
</div>
...and I want to trigger a function each time a new image is the active "fully visible" image. (Only one will fully fit.)
I was thinking of using something like this from this SO question:
function isScrolledIntoView(el) {
var elemTop = el.getBoundingClientRect().top;
var elemBottom = el.getBoundingClientRect().bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
return isVisible;
}
But how do I get the id of the divs surrounding the images? Or is there a better way to accomplish this without jQuery?
UPDATE: Tried this directive... but don't get anything in the console.
.directive('isVisible', function(){
return{
restrict: 'AE',
link: function($scope, $element,$attr){
var elemTop = $element.getBoundingClientRect().top;
var elemBottom = $element.getBoundingClientRect().bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
console.log($element);
console.log("VISIBLE: " + isVisible);
return isVisible;
}
}
})