Skip to content
This repository has been archived by the owner on Oct 7, 2019. It is now read-only.

"Directives to check if a DOM element is in a specified viewport

License

Notifications You must be signed in to change notification settings

klaascuvelier/angular-in-viewport

Repository files navigation

GitHub version NPM version

Build Status

Unmaintained

This library is no longer maintained by Showpad. Showpad has moved away from AngularJS and will not be publishing any new versions of this library.

angular-in-viewport

Set of directives handling events when a DOM element enters or leaves a viewport

viewport

Directive (attribute) specifying the DOM element which should be used as viewport.

To use window as the viewport element, set viewport="window" on any parent element.

viewport-enter

Directive (attribute) specifying a DOM element which should be watched. When the element enters the viewport the value of the attribute will be evaluated.

viewport-leave

Directive (attribute) specifying a DOM element which should be watched. When the element leaves the viewport the value of the attribute will be evaluated. The viewport-leave attribute needs a viewport-enter attribute with valid callback

#Compatibility This plugin works with Angular 1.x (v1.2 and higher)

#Example

Viewport container element:

<ul style="width: 200px; height: 200px" viewport>
  <li ng-repeat="item in items" style="width: 200px; height: 200px" viewport-leave="item.visible = false" viewport-enter="item.visible = true">
</ul>

Window viewport:

<ul style="width: 200px; height: 200px" viewport="window">
  <li ng-repeat="item in items" style="width: 200px; height: 200px" viewport-leave="item.visible = false" viewport-enter="item.visible = true">
</ul>

License

This Angular module has been published under the MIT license

About

"Directives to check if a DOM element is in a specified viewport

Resources

License

Stars

Watchers

Forks

Packages

No packages published