AngularJS Events
- Previous Page AngularJS DOM
- Next Page AngularJS Forms
AngularJS tana da hanyar fariyo HTML ta kaiwa.
AngularJS Events
Anke ki na za a yi wuri kusa da HTML elementa kai wajen kida fariyoyin AngularJS a kan wuri kanan, ta hanyar a yi wa kuma wuri ko wuri na dukkan:
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste
Akananin fariya ce don a gudanar hanyar AngularJS a kusa da fariyoyin mutum.
AngularJS 事件不会覆盖 HTML 事件,两个事件都会被执行。
鼠标事件
当光标移动到元素上时,将按照以下顺序发生鼠标事件:
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
或者,当鼠标点击元素时,将按照以下顺序触发:
- ng-mousedown
- ng-mouseup
- ng-click
您可以在任何 HTML 元素上添加鼠标事件。
Example
当鼠标移动到 H1 元素上时,增加 count 变量:
<div ng-app="myApp" ng-controller="myCtrl"> <h1 ng-mousemove="count = count + 1">鼠标移到我上方!</h1> <h2>{{ count }}</h2> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); </script>
ng-click 指令
ng-click
指令定义了当元素被点击时将执行的 AngularJS 代码。
Example
<div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count + 1">Click me!</button> <p>{{ count }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); </script>
你也可以引用一个函数:
Example
<div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="myFunction()">Click me!</button> <p>{{ count }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; $scope.myFunction = function() { $scope.count++; } }); </script>
切换,真/假
如果你想在点击按钮时显示一部分 HTML 代码,并在再次点击按钮时隐藏,就像下拉菜单一样,请使按钮表现得像切换开关一样:
点击我Example
<div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="myFunc()">点击我!</button> <div ng-show="showMe"> <h1>菜单:</h1> <div>披萨</div> <div>意大利面</div> <div>海鲜</div> </div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.showMe = false; $scope.myFunc = function() { $scope.showMe = !$scope.showMe; } }); </script>
showMe
变量开始时为布尔值 false
。
myFunc
函数通过使用 !
(非)运算符,将 showMe
变量设置为与其当前值相反的值。
$event 对象
调用函数时可以将 $event
对象作为参数传递。
$event
Objects contain the browser's event objects:
Example
<div ng-app="myApp" ng-controller="myCtrl"> <h1 ng-mousemove="myFunc($event)">Mouse Move to Above Me!</h1> <p>Coordinates: {{x + ', ' + y}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.myFunc = function(myE) { $scope.x = myE.clientX; $scope.y = myE.clientY; } }); </script>
- Previous Page AngularJS DOM
- Next Page AngularJS Forms