A directive to evaluate an expression if a DOM element is or not in the current visible browser viewport.
The directive is inspired by the jQuery.inview plugin. However this implementation has no dependency on jQuery.
To install using Bower:
bower install angular-inview
In your document include this scripts:
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-inview/angular-inview.js"></script>
In your AngularJS app, you'll need to import the angular-inview module:
angular.module('myModule', ['angular-inview']);
This module will define two directives: in-view and in-view-container.
<any in-view="{expression using $inview}" in-view-offset="{number}"></any>
The in-view attribute must contain a valid AngularJS expression
to work. When the DOM element enter or exits the viewport, the expression will
be evaluated. To actually check if the element is in view, the following data is
available in the expression:
$inviewis a boolean value indicating if the DOM element is in view$inviewpartis undefined or a string eithertop,bottomorbothindicating which part of the DOM element is visible.$elementis the DOM element that changed its visibility status.
An additional attribute in-view-offset can be speficied to add a virtual
offset to the element that will anticipate or delay the in view event.
The offset can be:
- a number: indicating how much to move down (or up if negative) the top position of the element for the purpose of inview testing;
- an array of two numbers representing the top and bottom offset respectively; this may virtually change the height of the element for inview testing.
Use in-view-container when you have a scollable container that contains in-view
elements. When an in-view element is inside such container, it will properly
trigger callbacks when the container scrolls as well as when the window scrolls.
<div style="height: 150px; overflow-y: scroll; position: fixed;" in-view-container>
<div style="height:300px" in-view="{expression using $inview}"></li>
</div>
MIT