AngularJS Event delegation

Benchmark created by Tobias Bosch on December 4, 2013

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>

<div id="root">
  <div ng-repeat="item in list" ng-click="main.selected = item"></div>
</div>

<script>
var rootTemplate = document.getElementById('root');

function run(ngClickDecorator) {
    var root = angular.element(rootTemplate.cloneNode(true));
    document.body.appendChild(root[0]);
        var injector = angular.injector(['ng', function($provide) {
            $provide.value('$rootElement', root);
            $provide.decorator('ngClickDirective', ngClickDecorator);
        }]);
        injector.invoke(function($compile, $rootScope) {
            var i, list = [];
            for (i=0; i<1000; i++) {
                list.push(i);
            }
            $rootScope.list = list;
            $rootScope.$apply(function() {
                $compile(root)($rootScope);
            });
            $rootScope.$destroy();
            root.remove();
            clearDataCache();
        });
}

function clearDataCache() {
  var key,
      cache = angular.element.cache;

  for(key in cache) {
    if (Object.prototype.hasOwnProperty.call(cache,key)) {
      var handle = cache[key].handle;

      handle && angular.element(handle.elem).off();
      delete cache[key];
    }
  }
};
</script>

Test runner

run(function($delegate) { return $delegate; });

run(function($delegate) { return $delegate; });

run(function($delegate) { return []; });

run(function($delegate) { 
  return [
    {compile: compile}
  ]; 
  function compile(element, attr) {
    attr.doSomething = true;
  }
});

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Tobias Bosch on December 4, 2013
• Revision 3: published by Tobias Bosch on December 4, 2013
• Revision 4: published on February 28, 2014