Get our Articles via Email. Enter your email address.
Send Me Tutorials
Get our Articles by Email. Enter your email.
Recent postsAngularJS Events |
AngularJS Events
Table of Contents
Last updated:
AngularJS Event Handling Introduction
When creating more advanced AngularJS applications, sooner or later your application will
need to handle DOM events like mouse clicks, moves, keyboard presses, change events etc.
AngularJS has a simple model for how to add event listeners to the HTML you generate
from your views. This text will explain this model.
Before we dive into the event stuff let me just show you a simple AngularJS application
which we will use as base for the examples shown in this text:
&!DOCTYPE html&
&html lang="en"&
&script src="/ajax/libs/angularjs/1.2.5/angular.min.js"&&/script&
&body ng-app="myapp"&
&div ng-controller="MyController" &
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
AngularJS Event Listener Directives
You attach an event listener to an HTML element using one of the AngularJS event listener directives:
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keypress
AngularJS Event Listener Examples
Here is a simple AngularJS event listener directive example:
&div ng-controller="MyController" &
&div ng-click="myData.doClick()"&Click here&/div&
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.doClick = function() {
alert("clicked");
When you click the inner div of the above example,
the myData.doClick() function will get called. As you can see in the
controller function, the myData object has a doClick()
function added to it.
As you can see, attaching events to HTML DOM elements is not much different from
generating the HTML in the first place. The event listener functions called are functions
added to the $scope object by the controller function.
The event listener directives have a special variable named $event which you
can use as parameter to the event listener function. The $event variable contains
the original browser event object. Here is an example:
&div ng-controller="MyController" &
&div ng-click="myData.doClick($event)"&Click here&/div&
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.doClick = function(event) {
alert("clicked: " + event.clientX + ", " + event.clientY);
You can also pass other parameters to your event listener functions. Here is an example
that adds event listener function to a list of li elements:
&div ng-controller="MyController" &
&li ng-repeat="item in myData.items"
ng-click="myData.doClick(item, $event)"&Click here&/li&
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [{ v: "1"}, { v: "2"}, { v : "3"} ];
$scope.myData.doClick = function(item, event) {
alert("clicked: " + item.v + " @ " + event.clientX + ": " + event.clientY);
This example iterates through a list of items, generates li elements from them,
and adds click listeners to each li element. Along with the call to the click
listener is passed the item JavaScript object the li element was
generated based on, along with the click event object ($event).
Connect with me:
Newsletter - Get all my free tips!
Please enable JavaScript to view the
This website uses cookies to improve the user experience and gather statistics. Our advertisers use cookies too (3rd party cookies),
to provide more relevant ads. Continued use of this website implies that you accept the use of cookies on this
We do not share our cookies with our advertisers, and our advertisers do not share
cookies with us.AngularJs ng-repeat 必须注意的性能问题
AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素，但是使用不当也会有性能问题。
在项目中我们使用 ng-repeat 加载完一个列表后，如果再次请求数据，然后过滤列表，代码可能会这么写：
&div ng-controller=&Test&&
& & &button ng-click=&request()&&请求新数据&/button&
& & &div ng-repeat=&user in users&&
& & & & {{user.name}}
& & &/div&
Controller 的代码：
app.controller('Test', function($scope) {
& & var users = [];
& & for (var i = 0; i & 100; i++) {
& & & & users[i] = {
& & & & & & id: i,
& & & & & & name: &User: & + i
& & & & };
& & $scope.users =
& & $scope.request = function () {
& & & & // 从服务器加载新数据
& & & & var result = [];
& & & & // 直接重新赋值给 users
& & & & $scope.users =
查看 ng-repeat 的可以发现，当 ng-repeat 的数组被替换时, 它默认并不会重新利用已有的 Dom 元素，而是直接将其全部删除并重新生成新的数组 Dom 元素：
// 将上次生成的所有 dom 移除
for (key in lastBlockMap) {
& & if (lastBlockMap.hasOwnProperty(key)) {
& & & & block = lastBlockMap[key];
& & & & elementsToRemove = getBlockElements(block.clone);
& & & & $animate.leave(elementsToRemove);
& & & & forEach(elementsToRemove, function(element) { element[NG_REMOVED] = });
& & & & block.scope.$destroy();ng-toggle in AngularJS}