Optimizing the application with the compile phase in ng-repeat

An extremely common pattern in an AngularJS application is to have an ng-repeat directive instance spit out a list of child directives corresponding to an enumerable collection. This pattern can obviously lead to performance problems at scale, especially as directive complexity increases. One of the best ways to curb directive processing bloat is to eliminate any processing redundancy by migrating it to the compile phase.

Getting ready

Suppose that your application contains the following pseudo-setup. This is what we need for the next section:

(index.html)

<div ng-repeat="element in largeCollection">
  <span my-directive></span>
</div>

(app.js)

angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    link: function(scope, el, attrs) {
      // general directive logic and initialization
      // instance-specific logic and initialization
    }
  };
});

How to do it…

A clever developer...