The
ngClick directive allows you to bind any custom behavior to the click event of the element.
The following code is an example of the usage of the
ngClick directive calling a function.
snippet
<html ng-app="parking">
<head>
<title>Parking</title>
<script src="angular.js"></script>
<script>
var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function($scope) {
$scope.appTitle = "Parking";
$scope.cars = [];
$scope.park = function(car) {
car.entrance = new Date();
$scope.cars.push(car);
delete $scope.car;
};
});
</script>
</head>
<body ng-controller="parkingCtrl">
<h3 ng-bind="appTitle"></h3>
<table>
<thead>
<tr>
<th>Plate</th>
<th>Entrance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars">
<td><span ng-bind="car.plate"></span></td>
<td><span ng-bind="car.entrance"></span></td>
</tr>
</tbody>
</table>
<input type="text" ng-model="car.plate" placeholder="What's the plate?" />
<button ng-click="park(car)">Park</button>
</body>
</html>
In the preceding code, there is another pitfall. Inside the
ngClick directive, we will call the park function, passing car as a parameter. As long as we have access to the scope through the controller, it would not be easy if we just accessed it directly, without passing any parameter at all.
Other Event Directives
Other directives that have the same behavior but are triggered by other events are
ngBlur,
ngChange,
ngCopy,
ngCut,
ngDblClick,
ngFocus,
ngKeyPress,
ngKeyDown,
ngKeyUp,
ngMousedown,
ngMouseenter,
ngMouseleave,
ngMousemove,
ngMouseover,
ngMouseup
, and
ngPaste.
