AngularJS ມີລະບຽບການເກີດທີ່ເປັນເອກະລາດຂອງຕົນເອງ。

ການປະຕິບັດການ 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-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave

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

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

您可以在任何 HTML 元素上添加鼠标事件。

ຄວາມນຳໃຊ້

当鼠标移动到 H1 元素上时，增加 count 变量：

<div ng-app="myApp" ng-controller="myCtrl">  
鼠标移到我上方！
  
{{ count }}
  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

ພະຍາຍາມຕະຫຼອດເທື່ອ!

ng-click 指令

ng-click 指令定义了当元素被点击时将执行的 AngularJS 代码。

ຄວາມນຳໃຊ້

<div ng-app="myApp" ng-controller="myCtrl">
Click me!
{{ count }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

ພະຍາຍາມຕະຫຼອດເທື່ອ!

你也可以引用一个函数：

ຄວາມນຳໃຊ້

<div ng-app="myApp" ng-controller="myCtrl">
Click me!
{{ count }}
</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()">ການຄຳສັ່ງ:ພົບ!</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 ວັດຖຸບັນທຶກສະໝອງບັນຊາບັນນາທິການບັນນາທິການບັນນາທິການ.

ຄວາມນຳໃຊ້

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">ນັ້ນສະໝອງຍິນຍັງພົບກັບຂ້ອຍ!</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>

ພະຍາຍາມຕະຫຼອດເທື່ອ!