Angular apps use the
ng-click() attribute rather than the the
Why is this?
ng-click holds an angular expression. Angular expressions are evaluated in the context of an Angular scope, which is bound to the element having the ng-click attribute or an ancestor of that element.
The Angular expression language doesn’t include flow control statements and can’t declare variables or define functions. These limitations mean templates can only access variables and run functions made available by a controller or directive.
Angular doesn’t change the meaning of the
onclick attribute; it adds the parallel
ng-click attribute to take an Angular expression.
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.
onclick) requires a bunch of steps
- get a reference to the scope
- assign the variable or call the function
scope.$applyso 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>
ng-click and an Angular expression for the assignment, almost all of that is implicit:
<a ng-click="yourVar = 42">Go</a>