angularjs指令作用及用法

您可自由转发此文， 但请保留出处：Ionic在线学习网站  http://www.ioniconline.com

 

1.ng-app

作用：定义了 AngularJS 应用程序的 根元素。

    例1：构建的是一整套的angular应用，那么应该将ng-app作为标签的一部分 像：       
        
        .......
                 
        这就告知angular管理页面中所有的DOM元素。
    例2：现有一个应用，这应用中期望使用像java、rails这样的技术来管理DOM，你就可以把ng-app放在某元素上（像页面上的
元素）告知angular来管理页面的某一部分 像：
        
        .......
        
 ........
        .......
        

2.NG-INIT

作用：初始化应用程序数据。

    例：  
    

        
在输入框中尝试输入：
            
姓名：
            
你输入的为： {{ firstName }}
    
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

3.NG-BIND

作用： 显示和更新文本。

    例：
  模型变量greeting的值就会显示在html中.
    等价效果： 
{{greeting}}
    两者的区别：使用双括号语法，在应用加载index.html的时候，angular用数据替换大括号前，用户也能看到未渲染的模块.  ng-bind这种形式就不会。

4.NG-MODEL

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

5.NG-CHANGE

作用：根据ng-model元素的变化，作出相应的变化。

6.NG-CONTROLLER

作用：指定html属于哪个控制器。

    例1：绑定一个复选框到属性
    

        
    
    选中它， somecontroller中的$scope 一个叫checkedit属性值会变成true。不选中的话checked就是false，相反改变checkedit的值也会改变复选框的选择情况。
    例2:绑定一个输入框用ng-change 属性来指定一个控制器的方法,当用户输入的值发生变化时将被调用
    

       Starting: 
       Recommendation: {{funding.needed}}
       
 

    对应controller中
    function StartUpController($scope) { 
       $scope.funding = { startingEstimate: 0 }; 
       $scope.computeNeeded = function() {
       $scope.funding.needed = $scope.funding.startingEstimate*10;}; 
       } 
    上面会有潜在问题：当用户在输入框中输入时,我 们只是重新计算了需要的数量。如果在这种场景下当用户输入时,输入框只是做了更新,这 看上去运行的很好。但是倘若其他的输入框也绑定到这个模型的属性该怎么办?倘若当来自 服务器的数据,是否会更新呢？ 这时我们可以用$scope的$watch函数更新这个字段。       
    在StartUpController最下面添加：
    $scope.$watch('funding.startingEstimate', computeNeeded);
       这时ng-change可以去掉了，因为功能被$watch代替了，

7.NG-SUBMIT

作用：管理多个输入框的表单,那么你可以在表单上用 ng-submit 标识符指 定一个函数,当表单整体结束提交时调用这个函数。

    例：
    
 
            Starting:  
            Recommendation: {{needed}}
           Fund my startup!
          
        function StartUpController($scope) {
            $scope.computeNeeded = function() {
            $scope.needed = $scope.startingEstimate * 10;
            };
            $scope.requestFunding = function() {
            window.alert("Sorry, please get more customers first.");
            };
    } 

8.NG-REPEAT

作用：重复HTML元素

    例：
    

        
使用 ng-repeat 来循环数组
        

        

            {{ x }}
        
        
    

9.NG-CLASS

作用：用于动态自定义dom元素的css class name。

在实际的应用场景中还是比较灵活的，而在AngularJS中一般有四种方式给元素的class属性做一些门道， 如下：

9.1scope变量绑定（不推荐使用）

function ctr($scope){
     $scope.test =“classname”;
}

这种方式完全没错，是angular提供的一种改变class的方式，但是在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object。

9.2字符串数组形式

function Ctr($scope) { 
      $scope.isActive = true;
}   

其结果是2中组合，isActive表达式为true，则 active，负责inactive。

9.3表达式形式

function Ctr($scope) { 

}

 

当point>0的时候执行style1，否则style2

9.4对象key/value处理

function Ctr($scope) { 

}

 

当 isSelected = true 则增加selected class，当isCar=true,则增加car class。以此类推。

10.NG-STYLE

作用：用来设置元素的style属性的css值

例：
    
    
    Sample Text

ng-style指定的表达式必须是个单层的json对象，key和value对应css属性的名称和值。注意如果css属性名中有“-”连接符，需要用引号括起来。