Boost performance of Angular's
ng-repeat directive for long lists by disabling watchers while elements are not displayed inside viewport.
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.
The MIT License.