Sample code for angular-visible (https://github.com/sculove/angular-visible)
<!-- 1st: install, load file and inject module in the main app -->
<script>
angular.module('appName', ['angular-visible']).config(/*...*/)
</script>
<!-- 2nd: add html element that checks its children for visibility -->
<check-visible
target-class="class-to-check" <!-- class to look for in child elements -->
check-delay="500" <!-- delay in millisecunds -->
check-remove-target="true"> <!-- whether to remove target class when it becomes visible -->
<some-tag class="class-to-check"></some-tag> <!-- directive to include a template and to call a controller someTagCtrl! -->
</check-visible>
// 3rd: create a boolean inside someTagCtrl to keep track of element already on screen
$scope.alreadyOnScreen = false;
// 4th: add event listener to someTagCtrl
$scope.$on("visible", function(e,data) {
for(var i =0, len=data.length; i<len; i++) {
/* do something with the 'data' array, i.e. the array of the visible DOM elements */
}
});
// 5th: inside someTagCtrl check for elements already on screen when loaded and fire event
angular.element(document).ready(function(){ // wait until element coordinates are available
var YPosition = angular.element(document)
.find(elementName)[$scope.$index] // find element whose position is in question
.getBoundingClientRect().top; // get Y coordinate
var windowHeight = window.innerHeight; // get window height
if (YPosition > 0 && YPosition < windowHeight) { // if element is in window by default
$scope.$broadcast('visible'); // broadcast visible event
$scope.alreadyOnScreen = true; // remember that this element was on screen by default
}
});