Do ng-click, ng-mouseover etc create watchers and slow down the page? Is it better than jQuery event binding?

Question

I was wondering if directives like ng-click, ng-mouseover etc when used in large numbers throughout the application, would result in performance issues similar to that of ng-repeat?

I am developing an application with AngularJS. I am already loaded with problems because of ng-repeat and the number of watchers it creates. The performance has been affected, and I'm working on it.

Answer 1

There are no extra watches created as part of angular's event directives.

The event directives are fairly straight forward and use jquery (or jqLite if jquery isn't included) to add the event listener to the element with the directive (i.e. ng-click). Here is the code that sets up the event directives in angular. As you can see they do not create a watch.

var ngEventDirectives = {};
forEach(
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
  function(name) {
    var directiveName = directiveNormalize('ng-' + name);
    ngEventDirectives[directiveName] = ['$parse', function($parse) {
      return {
        compile: function($element, attr) {
          var fn = $parse(attr[directiveName]);
          return function(scope, element, attr) {
            element.on(lowercase(name), function(event) {
              scope.$apply(function() {
                fn(scope, {$event:event});
              });
            });
          };
        }
      };
    }];
  }
);

Keep in mind, a $scope.apply() kicks off a digest loop where the angular async queue is processed and watch list is iterated over.