angularjs教程

As a web developer, we will have to deal with different DOM events like key press, mouse moves, mouse clicks and other change events.  In this tutorial, we will look into the AngularJS Directives for handling these events with suitable examples.

作为Web开发人员，我们将不得不处理不同的DOM事件，例如按键，鼠标移动，鼠标单击和其他更改事件。 在本教程中，我们将通过适当的示例介绍用于处理这些事件的AngularJS指令。

内容： (Contents:)

• Introduction to AngularJS Event Listener Directives
  AngularJS事件侦听器指令简介
• AngularJS events example
  AngularJS事件示例

AngularJS事件侦听器指令简介 (Introduction to AngularJS Event Listener Directives)

The following list shows the available AngularJS event listener directives for DOM events.

以下列表显示了DOM事件的可用AngularJS事件侦听器指令。

• ng-click
  ng-点击
• ng-dblclick
  ng-dblclick
• ng-keydown
  ng-keydown
• ng-keypress
  ng键
• ng-keyup
  ng-keyup
• ng-mousedown
  ng-mousedown
• ng-mouseenter
  ng-mouseenter
• ng-mouseleave
  ng-mouseleave
• ng-change
  ng-change

用法 (Usage)

We can use above AngularJS event listener directives as an attribute of HTML element as shown below.

我们可以将上面的AngularJS事件侦听器指令用作HTML元素的属性，如下所示。

    
     ........
    

Here expression is evaluated on triggering each event.

这里， 表达式是在触发每个事件时进行评估的。

AngularJS事件示例 (AngularJS Events Example)

The following example demonstrates the angularJS events. Directives like ngClick, ngFocus etc expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. The event object is also available for key events and can be used to get keyCode, altKey etc. values.

以下示例演示了angularJS事件。 诸如ngClick ， ngFocus等指令在该表达式的范围内公开了$event对象。 当存在jQuery或类似的jqLite对象时，该对象是jQuery事件对象的实例。 事件对象也可用于键事件，并可用于获取keyCode ， altKey等值。

index.html

index.html

	
    		  
    
      ngClick Directive 	
     Click Me! {
   { clicked }}
      ngDblclick Directive 	
     Double Click! {
   { count }}
      ngMousedown and ngMouseup Directive 	
      Change Color
      ngMouseenter and ngMouseleave Directives 	
     Toggle Colors
      ngMousemove Directive 	
     Move Mouse Moved {
   {moveCnt}} times. 
      ngkeyup Directive  Type something : 	
      key up count: {
   {keyupcount}}
      ngkeydown Directive Type something :	
     event keyCode: {
   { event.keyCode }}
      ngChange Directive Checked :	
      {
   {checked}}
    

The controller is created in the following file. You can see the use of $event object.

在以下文件中创建控制器。 您可以看到$event对象的使用。

app.js

app.js

var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.onClick = function(event){          $scope.clicked = "Clicked On X: "+event.clientX +" and Y: "+event.clientY;    };});

The following CSS styling is used in the example.

本示例中使用以下CSS样式。

mystyle.css

mystyle.css

.btn1 {  color: #FFF;  background-color: #900;  font-weight: bold;  font-size : 20px;}.btn2 {  color: #FFF;  background-color: green;  font-weight: bold;  font-size : 20px;}.btn3 {  color: #FFF;  background-color: blue;  font-weight: bold;  font-size : 20px;}.txt {   border: 1px solid red;}.red {  background-color: red;}.green {  background-color: green;}

Now you can play with following output.

现在您可以播放以下输出。

That’s all for now and we will see more angularJS features in upcoming tutorials.

到此为止，我们将在接下来的教程中看到更多angularJS功能。

翻译自:

angularjs教程