Matukio ya AngularJS

AngularJS ina maadili ya matukio ya HTML yake.

Matukio ya AngularJS

Unaweza kutumia moja au zaidi ya madirisha hizi kuingia kwenye HTML element yako kwa kufungua kinaangalizi ya matukio ya AngularJS:

• 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

Inarifu ya kesiweza kutumia maadili ya AngularJS kwenye matukio ya wengi wa watu.

AngularJS 事件不会覆盖 HTML 事件，两个事件都会被执行。

鼠标事件

当光标移动到元素上时，将按照以下顺序发生鼠标事件：

• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave

或者，当鼠标点击元素时，将按照以下顺序触发：

• ng-mousedown
• ng-mouseup
• ng-click

Unaweza kuongeza tukio kwenye elementi kama HTML.

Mivivu

Wakati kina kina kwenye juu ya H1 elementi, muhabali ya count inasababisha kuzingatia.

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Wakati uwe na kina kwenye juu ya H1 elementi, tukio hili litakaa kuzingatia muhabali ya count:</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Kutembea kwa matokeo

ng-click mfano wa kufanya

ng-click Mfano wa kufanya inadefinisha AngularJS kama uendelevu kwa sababu ya kufanyika kama tukio inayotukia elementi.

Mivivu

<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>

Kutembea kwa matokeo

Wewe pia unaweza kutumia mfano wa kufanya kwa sababu ya

Mivivu

<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>

Kutembea kwa matokeo

Tukio, kweli/mwangalifu

Ikiwa unataka kuonyesha sehemu kama HTML kwa sababu ya uhesabu wa nafasi, na kusikia uhesabu wa nafasi kwa sababu ya uhesabu wa nafasi kama menu ya kudhaa, tafadhali nika kwa sababu ya kujitokeza kama switch:

Mivivu

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Kadhaa nime!</button>  
<div ng-show="showMe">  
  <h1>Menu:</h1>  
  <div>pizza</div>  
  <div>makadara</div>  
  <div>makuni</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>

Kutembea kwa matokeo

showMe muhabali inaitwa value kuanzia wakati wa uwanja. false.

myFunc mfano wa kufanya kwa sababu ya !operatori (ingawa inaonekana) inasababisha showMe mivyo inayotumika kwenye thamani inayotumika inasababisha thamani hiyo kuzingatia thamani yake hivi karibuni.

$event muhabali

inaukwaja kufanya kwa sababu ya $event muhabali kwa sababu ya kumpatikana

$event Mtuweza kuandaa matokeo ya matukio ya kiburi:}}

Mivivu

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Wingia mawingu kwa juu yake!</h1>
<p>Mashambulizi: {{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>

Kutembea kwa matokeo