Why do we need ng-click?

BanksySan picture BanksySan · Aug 10, 2012 · Viewed 39.9k times · Source

Angular apps use the ng-click() attribute rather than the the onclick event.

Why is this?

Answer

rakslice picture rakslice · Nov 28, 2013

Angular doesn't change the meaning of the onclick attribute; it adds the parallel ng-click attribute to take an Angular expression. onclick takes plain old JavaScript code even when you're using Angular.

Practically speaking, suppose what you're doing in a click handler is changing some variables in an Angular scope, or calling a function in an Angular scope that changes some variables. To do that from JavaScript code (like what you would put in onclick) requires a bunch of steps

  • get a reference to the scope
  • assign the variable or call the function
  • call scope.$apply so that anything watching for updates to the variables that you changed gets notified

This looks like:

<a onclick="var $scope = angular.element(event.target).scope(); $scope.yourVar = 42; $scope.$apply()">Go</a>

and with ng-click and an Angular expression for the assignment, almost all of that is implicit:

<a ng-click="yourVar = 42">Go</a>