AngularJS （2）

AngularJS 指令

• AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

• ng-app 指令初始化一个 AngularJS 应用程序。

• ng-init 指令初始化应用程序数据。

• ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

  
  
    
  在输入框中尝试输入：
    
  姓名：
    
  你输入的为： {{ firstName }}
  
  
  

数据绑定

• AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

  
  
  价格计算器
  
  数量： 
  价格： 
  
  总价： {{ quantity * price }}
  
    
  

• 实现重复利用

  
     
  使用 ng-repeat 来循环数组
     
  
        
  
          {{ x }}
        
     
    
  

• 常用指令

  1. ng-app

     ng-app 指令定义了 AngularJS 应用程序的 根元素。

     ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

  2. ng-init

     ng-init 指令为 AngularJS 应用程序定义了 初始值。

     通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它

  3. ng-model
     ng-model 指令 绑定 HTML 元素 到应用程序数据。

     • ng-model 指令也可以：
       • 为应用程序数据提供类型验证（number、email、required）。
       • 为应用程序数据提供状态（invalid、dirty、touched、error）。
       • 为 HTML 元素提供 CSS 类。
         • 绑定 HTML 元素到 HTML 表单。

  4. ng-repeat
     ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
     你可以使用 .directive 函数来添加自定义的指令。

  5. 限制使用
     通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

     var app = angular.module("myApp", []);
     app.directive("runoobDirective", function() {
         return {
             restrict : "A",
             template : "
     自定义指令!
     "
         };
     });
     

     • restrict 值可以是以下几种:
     • E 只限元素名使用
     • A 只限属性使用
     • C 只限类名使用
     • M 只限注释使用
     • restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。