IBS Microsoft 365 and SharePoint Blog

Recently while working on an Angular.js application, I learned that the maximum number of bindings you would want on a single angular page is 2000.  This translates into watches directly.

Here’s a script to determine the current number of watches in your application (source):

function getWatchers(root) {

     root = angular.element(root || document.documentElement);

     var watcherCount = 0;

     function getElemWatchers(element) {

          var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);

          var scopeWatchers = getWatchersFromScope(element.data().$scope);

          var watchers = scopeWatchers.concat(isolateWatchers);
r
          angular.forEach(element.children(), function (childElement) {

               watchers = watchers.concat(getElemWatchers(angular.element(childElement)));

          });

          return watchers;

     }

     function getWatchersFromScope(scope) {

          if (scope) {

               return scope.$$watchers || [];

          } else {

               return [];

          }

     }

     return getElemWatchers(root);

}

getWatchers().length

This won’t directly affect creating new items in a page (like adding a row to a table) but it will affect overall page performance. For example, scrolling will be slow and jagged, or navigating to a different page will take a long time.

Side note: In Tracker’s item search, when displaying 25 items (each with 15 columns), it has over 6000 watches!