Angular directive that disables watchers in scopes out of viewport
1 person uses it
Author: 1764161?v=3 shahata

Angular Viewport Watch Build Status Coverage Status

Boost performance of Angular's ng-repeat directive for long lists by disabling watchers while elements are not displayed inside viewport.


BTW, ng-repeat is just an example, this directive will work on anything.

What it does

Displaying long lists of items is a big pain in angular since they add many more watchers to the scope which makes the digest loop longer. Since every model change in angular triggers a digest loop, even a simple thing like typing a name inside some input field might become sluggish if a long list of some items is displayed on the page at the same time.

Angular 1.3 added a bind-once mechanism which removes watchers once they receive a value, but this only helps if the list you are displaying is static. But what about cases where your list contains dynamic information which might change at any moment? Bind-once will not help you in those cases.

This library introduces a simple directive named viewport-watch which solves this issue by disabling watchers that are currently out of the viewport and makes sure they get enabled and updated with their correct value the moment they come back into the viewport. This means that at any moment, the amount of items being watched is not greater then the amount of items that fit into the user's screen. This obviously cuts down the digest loop length by orders of magnitude.


Install using bower

bower install --save angular-viewport-watch

Include script tag in your html document.

Add a dependency to your application module.

Directive Usage


The MIT License.


comments powered by Disqus
This page was last updated almost 4 years ago.