AngularJS有自己的HTML事件的指令。
AngularJS活動
您可以使用這些指令的一個或多個添加AngularJS事件偵聽器的HTML元素：
-
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
本次活動的指示使我們能夠在特定的用戶事件運行AngularJS功能。
一個AngularJS事件不會覆蓋HTML事件，這兩個事件將被執行。
鼠標事件
當光標移過一個元素，按照這個順序鼠標事件發生：
- NG-的mouseenter
- NG-鼠標懸停
- NG-鼠標移動
- NG-鼠標離開
或當鼠標按鈕被點擊的元素上，順序如下：
- NG-鼠標按下
- NG-鼠標鬆開
- NG-點擊
您可以在任何HTML元素上添加鼠標事件。
例
增加計數變量時，在H1元素的鼠標移動：
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="count
= count + 1">Mouse over me!</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script> 試一試» 在NG-點擊指令
在ng-click指令定義被點擊的元素時，將執行AngularJS代碼。
例
<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> 試一試» 你也可以指一個功能：
例
<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代碼段的一個按鈕被點擊時，當按鈕被再次點擊，就像一個下拉菜單隱藏，使按鈕像一個切換開關：
菜單：
比薩
意大利面
派斯
例
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc()">Click
Me!</button>
<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</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對象包含瀏覽器的事件對象：
例
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Mouse
Over 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>
試一試»