Angular指令

一、指令

基础指令

1、ng-disabled

使用ng-disabled可以把disabled属性绑定到以下表单输入字段上： <input> （ text、 checkbox、 radio、 number、 url , email 、 submit）； <textarea> ； <select> ； <button> 。

案例1：
<input type="text" ng-disabled="true" placeholder="TypetoEnable">

在下面的例子，文本字段会被禁用五秒，直到在$timeout中将isDisabled属性设置为true：

<textarea ng-disabled="isDisabled">Wait5seconds</textarea>
angular.module('myApp', [])
.run(function($rootScope, $timeout) {
 $rootScope.isDisabled = true;
 $timeout(function() {
 $rootScope.isDisabled = false;
 }, 5000);
});  

2、ng-select

用来将数据同HTML的<select> 元素进行绑定。这个指令可以和ng-model 以及ng-options指令一同使用，构建精细且表现优良的动态表单。

3、ng-options

ng-options的值可以是一个内涵表达式注意上边option位置是怎么写的？ 接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项。

演示代码：

angular.module('myApp',[])
            .controller('myController',function($scope) {
                $scope.cities = [
                    {name: 'Seattle'},
                    {name: 'San Francisco'},
                    {name: 'Chicago'},
                    {name: 'New York'},
                    {name: 'Boston'}
                ];
            });

 <select ng-model="city"
            ng-options="city.name for city in cities">
        <option value="">Choose City</option>
    </select>
    Best City: {{ city.name }}  

4、ng-submit

ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请 求并重新加载页面）， 除非表单不含有action属性。

演示代码：

<form ng-submit="submit()"
      ng-controller="FormController">
    Enter text and hit enter:
    <input type="text"
           ng-model="person.name"
           name="person.name" />
    <input type="submit" value="Submit" />
</form>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('FormController',function($scope) {
                $scope.person = {};
                $scope.submit = function() {
                  alert($scope.person.name)
                };
            });
</script>  

5、ng-app

任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。

演示代码：

<div ng-app="myApp">
    {{ someProperty }}
    <button ng-click="someAction()">测试</button>
</div>
<script type="text/javascript">
    angular.module('myApp', [])
            .run(function($rootScope) {  //注意这里的run方法，我们之前就用过几次，后边会在module加载的时候解释，现在用就可以了
                $rootScope.someProperty = 'hello world';
                $rootScope.someAction = function() {
                    $rootScope.someProperty = '你好世界';
                };
            });
</script>  

6、ng-controller

内置指令ng-controller的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作 和模型都定义在$rootScope上。用这个指令可以在一个DOM元素上放置控制器。

$scope只是一个JavaScript对象，其中含有从父级$scope中通过原型继承得到的方法和属性，包括应用的$rootScope。

嵌套在ng-controller中的指令有访问新子$scope的权限，但是要牢记每个指令都应该遵守的和作用域相关的规则。 注意：$scope对象的职责是承载DOM中指令所共享的操作和模型。

演示代码：

<div ng-app="myApp">
    <div ng-controller="myController">
    {{ someModel.someProperty }}
    <button ng-click="someAction()">click me</button>
</div>
</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('myController', function($scope) {
                //创建模型
                $scope.someModel = {
                    // 添加属性
                    someProperty: 'hello world'
                }
                // 设置$scope自身的操作
                $scope.someAction = function() {
                    $scope.someModel.someProperty =' 你好世界';
                };
            });
</script>  

案例2：之前作用域嵌套

<div ng-app="myApp">
    <div ng-controller="SomeController">
        {{ someBareValue }}
        <button ng-click="someAction()">Communicate to child</button>
        <div ng-controller="ChildController">
            {{ someBareValue }}
            <button ng-click="childAction()">Communicate to parent</button>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
    angular.module('myApp', [])
            .controller('SomeController', function($scope) {
                // 反模式，裸值
                $scope.someBareValue = 'hello computer';
                // 设置 $scope 本身的操作，这样没问题
                $scope.someAction = function() {
                    // 在SomeController和ChildController中设置{{ someBareValue }}
                    $scope.someBareValue = 'hello human, from parent';
                };
            })
            .controller('ChildController', function($scope) {
                $scope.childAction = function() {
                    // 在ChildController中设置{{ someBareValue }}
                    $scope.someBareValue = 'hello human, from child';
                };
            });
</script>  

7、ng-switch

可以在数据发生变化时渲染不同指令到视图中。

演示代码：

<div ng-app>
    <input type="text" ng-model="person.name"/>
    <div ng-switch on="person.name">
        <p ng-switch-default>admin</p>
        <h1 ng-switch-when="zhangsan">{{ person.name }}</h1>
    </div>
</div>  

8、ng-if

使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插 入DOM中。

演示代码：

<div ng-app>
    <div ng-if="2+3===5">
       hello world
    </div>
</div>

<div ng-app="myApp" ng-controller="myController">
    <div ng-if="test">
        hello world
    </div>
</div>

   angular.module('myApp',[])
            .controller('myController', function($scope) {
              $scope.test=false;
            });  

重要：

9、ng-repeat

ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。 参数：

$index：遍历的进度（ 0...length-1 ）。

$first：当元素是遍历的第一个时值为true。

$middle：当元素处于第一个和最后元素之间时值为true。

$last：当元素是遍历的最后一个时值为true。

$even：当$index值是偶数时值为true。

$odd：当$index值是奇数时值为true。

演示代码：

<div ng-app="myApp">
    <ul ng-controller="myController" >
        <li ng-repeat="stu in people" ng-class="{even:$even,odd:$odd}" >  //{even:！$even,odd:!$odd}注意
            {{stu.name}} lives in {{stu.city}}
        </li>
    </ul>

</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('myController',function($scope) {
                $scope.people = [
                    {name: "Ari", city: "San Francisco"},
                    {name: "Erik", city: "Seattle"},
                    {name: "zhgangsan", city: "chengdu"}
                ];
            });
</script>  

10、ng-init

ng-init指令用来在指令被调用时设置内部作用域的初始状态。 主要用于测试或出示的时候

   <div ng-init="word1='Hello';word2='World'">
        {{word1}} {{word2}}
    </div>  

11、{{ }}

{{ }} 语法是AngularJS内置的模板语法，它会在内部$scope和视图之间创建绑定。基于这个 绑定，只要$scope发生变化，视图就会随之自动更新。

 <div ng-init="test='HelloWorld'">
            {{test}}
    </div>  

12、bind绑定

bind绑定——特别说明，之前我们直接绑定的时候{{}}当我们刷新页面或者用户网速比较慢的时候会把{{name}}--这个东西闪烁一下再出来值，bind就是解决方案。

<div ng-init="test='HelloWorld'">
       <p ng-bind="test"></p>——而且对样式好控制
</div>  

除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }} 的元素上使用ng-cloak指令：

<body ng-init="greeting='HelloWorld'">
 <p ng-cloak>{{ greeting }}</p>
</body  

13、ng-cloak

指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。——用这种办法同样能去掉闪烁

<div ng-init="test='HelloWorld'">
           <p ng-cloak>{{test}}</p>
    </div>  

14、ng-bind-template

同ng-bind指令类似， ng-bind-template用来在视图中绑定多个表达式。

演示代码：

<div ng-app="myApp" >
    <div ng-controller="myController">
        <p ng-bind-template="{{name}}{{age  }}"></p>
    </div>
</div>

</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('myController',function($scope) {
                $scope.name ="zhangsan" ;
                $scope.age=19;
            })
</script> 

15、ng-show/ng-hide

ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的 值为false时元素会被隐藏。类似地，当赋值给ng-hide指令的值为true时元素也会被隐藏。

演示代码：

<div ng-show="2 + 3 == 5">----和之前的什么优点类似呢？
   hello
</div>


 alert($("div").attr("ng-show"))——通过jquery访问一下  

16、ng-click

ng-click用来指定一个元素被点击时调用的方法或表达式。——之前已经用过

<body ng-app="myApp" >
<div ng-controller="myController">
    <button ng-click="count = count + 1"
            ng-init="count=0">
        add
    </button>
    count: {{ count }}
    <button ng-click="subtraction(2)">subtraction</button>
</div>
</body>

</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('myController', function($scope) {
                $scope.subtraction = function(num) {
                    $scope.count -= num;
                };
            })
</script>  

定义指令

AngularJS应用的模块中有很多方法可以使用，其中directive() 这个方法是用来定义指令的： 用法：

演示代码：

angular.module('myApp', [])
.directive('myDirective', function ($timeout, UserDefinedService) {
 // 指令定义放在这里
});  

1、directive()

directive() 方法可以接受两个参数：
1. name（字符串） 指令的名字，用来在视图中引用特定的指令。 factory_function （函数） 这个函数返回一个对象，其中定义了指令的全部行为。 $compile服务利用这个方法返回的对 象，在DOM调用指令时来构造指令的行为。

用例：

<div ng-app="myApp" ng-controller="myController">
        <test></test>
         <span test></span>
       <span class="test"></span>
         <!-- directive:test -->
          <div></div>
</div>
 var app= angular.module('myApp',[])
         app.directive("test",function(){
             return{
                 restrict:"AEMC",   ---注意这里的AEMC分别带别什么
                  template:"<span>hello world</span>",
                  replace:true
             }
         })

        template:"<p>hello wolrd <span ng-transclude></span></p>",
            transclude:true  ---注意这是做什么 的

错误示范：

  var app = angular.module('myApp', []);
    app.directive("test",function(){
        return{
          //  scope:{},
            restrict:"AEMC",
              template:'<div><input type="text" ng-model="name"/>{{name}}</div>',
              replace:true
    }
    })
  <test></test>
    <test></test>---发生了什么事请？怎么解决  

案例2：在自定义指令中做动作

<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller("myController",["$scope",function($scope){
        $scope.fun=function(){
            alert("hello")
        }
    }])
    app.directive("test",function(){
        return{
            restrict:"AE",
            link:function(scope,element,attr){
                element.bind("click",function(){
                    scope.$apply("fun()")
                })
            }
        }
    })

<div ng-app="myApp" ng-controller="myController">
    {{name}}
    <test>点击我啊</test>
</div>

这里有个关键的字：howToLoad---当页面上的两个地方都要使用同一个link去做一些业务处理的时候。

演示代码：

<div ng-controller="myController2">
    <p test howToLoad="fun2()">hello</p>
</div>

<div ng-controller="myController">
    <p  test howToLoad="fun1()">hello</p>
</div>




<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller("myController",["$scope",function($scope){
        $scope.fun1=function(){
            alert("hello")
        }
    }])

    app.controller("myController2",["$scope",function($scope){
        $scope.fun2=function(){
            alert("hello2")
        }
    }])
    app.directive("test",function(){
        return{
            restrict:"AE",
            link:function(scope,element,attr){
                element.bind("click",function(){
                    scope.$apply(attr.howtoload)
                })
            }
        }
    })  

angularjs帮我做了一些内置指令之前学过一些，这边它大概帮我们提供了60+种指令 我们现在来看我们最为关心的form指令。

演示代码：

<form name="myForm" ng-submit="save()" ng-controller="myController">
        <input type="text" name="userName" ng-model="user.name" required>
        <input type="password" name="pwd" ng-model="user.pwd" required>
        <input type="submit" ng-disabled="myForm.$invalid">
</form>

 var app = angular.module('myApp', []);
   app.controller("myController",["$scope",function($scope){
       $scope.user={}
       $scope.save=function(){
           alert($scope.user.name)
       }
   }])  

模块引入

在自定义Angular指令时，其中有一个叫做require的字段，这个字段的作用是用于指令之间的相互交流。举个简单的例子，假如我们现在需要编写两 个指令，在linking函数中有很多重合的方法，为了避免重复自己（著名的DRY原则），我们可以将这个重复的方法写在第三个指令的 controller中，然后在另外两个需要的指令中require这个拥有controller字段的指令，最后通过linking函数的第四个参数就可以引用这些重合的方法。

演示代码：

var app = angular.modeule('myapp',[]);  

app.directive('parent',function(){  
    return {  
    ...  
    controller: function($scope){  
        this.method1 = function(){  
        };  
        this.method2 = function(){  
        };  
    },  
    ...  
    }  
});  

app.directive('d1',function(){  
    return {  
    ...  
    require: '^parent',  
    link: function(scope,elem,attrs,parent){  
       parent.method1()
        ..  
        },  
    ...  
    }  
});    

我们一般引入它：require: 'ngModel',
我们在require里定义了ngModel 所以这里它是一个NgModelController NgModelController是用来为ng-model提供了一组API。通过他我们可以他来确定ngModel的 值是否是合法的。 我们来做这么一个实验，验证我们的表单中的一些数据是否合法。

演示代码：

 var app = angular.module('myApp', []);
    app.directive("isUse",function($http){
        return {
            restrict:"A",
            require:"ngModel",
            link:function(scope,element,attr,model){
                element.bind("blur",function(){
                    scope.$apply(function(){
                        if(scope.username == "abcdefg"){
                            model.isExist = true;
                        }else{
                            model.isExist = false;
                        }
                    });

                });
            }
        };
    });
<form name="myForm">
    用户名：<input type="text" name="username" ng-model="username" ng-pattern="/^\w{6,20}$/" required is-use />
    <span ng-show="myForm.username.$error.required">用户名不能为空</span>
    <span ng-show="myForm.username.$error.pattern">用户名格式不正确</span>
    <span ng-show="myForm.username.isExist">用户名已存在</span>
</form>  

二、同外界通信： XHR和服务器通信

$http

我们可以使用内置的$http服务直接同外部进行通信。 $http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象，具有success和error两个方法。

演示代码：

$http({
 method: 'GET',
 url: '/api/users.json'
}).success(function(data,status,headers,config) {
 // 当相应准备就绪时调用
}).error(function(data,status,headers,config) {
 // 当响应以错误状态返回时调用
});  

案例1：

点击按钮的时候从后台加载数据：

<body ng-app="myApp">
<div ng-controller="myController">
<button ng-click="fun()">click me</button>
</div>
<script type="text/javascript">
    angular.module('myApp',[])
            .controller('myController',["$scope","$http",function($scope,$http){
                $scope.fun=function(){
                    $http({
                        method:'get',
                        url:"data.json"
                    }).success(function(data){
                                alert(data)
                            })
                }
            }]);
</script>  

注意这里http方式完整模式：

$http({
            method:'POST',
            url:_finalUrl,
            data:_data,
             headers:{
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).success(function(data){
            deferred.resolve(data);
        }).error(function(data, status, headers, config) {
            deferred.reject('Then was an error');
        });

提供的简化方案： 1：post方式提交数据

  angular.module('myApp',[])
            .controller('myController',["$scope","$http",function($scope,$http){
                $scope.fun=function(){
               $http.post('data.json').success(function(data){
                   alert(data);
               })
            }
            }]);

2：get方式

   angular.module('myApp',[])
            .controller('myController',["$scope","$http",function($scope,$http){
                $scope.fun=function(){
               $http.get('data.json').success(function(data){
                   alert(data);
               })
            }
            }]);

来源：https://www.cnblogs.com/haonantong/p/4662590.html