Angular自定義指令（directive）

時間 2019-11-24

標籤 angular 自定義指令 directive 欄目 AngularJS 简体版

原文原文鏈接

angular自定義指令，意咱們能夠經過angula本身定義指令，來實現咱們的特殊要求,隨心所欲，一支穿雲箭，千軍萬馬來相見html

多少年的老規矩了，先看代碼:app

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7     <title>test</title>
 8 </head>
 9 <body ng-app="myApp">
10     <my-title></my-title>　　　　//元素my-title
11     <div my-title></div>        //屬性my-title
12     <div class="my-title"></div>//類my-title
13     <!-- directive: my-title -->//註釋my-title（注意必定要加directive）
14 <script src="angular.min.js"></script>
15 <script>
16 var app = angular.module("myApp", [])
17 
18 app.directive("myTitle", function(){ //myTitle與上面的my-title對應, 這裏要寫駝峯式，上面寫 - 式 19     return {
20         restrict: 'ECMA',            //指令做用域,E表示做用於元素,C表示做用於類（class）,M表示做用於註釋,A表示做用於元素屬性
21         template: '<h1>還有誰</h1>',  //模板,將模板內容顯示在對應區域（按照restrict顯示）
22 replace: true　　　　　　 //用模板標籤替換掉註釋標籤,使得註釋內容能在網頁內顯示出來 (即：設置爲true能夠替換標籤，false只能替換文本內容)    
24     }
25 })
26 
27 </script>
28 </body>
29 </html>

transclude

transclude能夠將被替換掉的文本內容顯示到指定位置，用法以下：測試

transclude: true; ng-transclude;配合使用ui

1 <div my-title>德萊聯盟</div>

1 app.directive("myTitle", function(){
2     return {
3         restrict: 'AM',
4                 template: '<span><div ng-transclude>德萊聯盟</div>德瑪西亞</span>',
5                 replace: true,
6                 transclude: true
7     }
8 })

templateUrl

經過templateUrl能夠用外部文本、標籤替換內部文本、標籤，注：要在localhost協議下測試this

app.directive("myTitle", function(){
    return {
        restrict: 'AM',
        templateUrl: 'time.html'         //加入外部文件url
    }
})

如上，咱們能夠經過自定義指令，來渲染頁面，固然自定義指令也能夠加在控制器裏，這時控制器做用域做爲父做用域，以下：url

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7     <title>test</title>
 8 </head>
 9 <body ng-app="myApp">
10     <my-title></my-title>
11     <div my-title></div>
12     <div class="my-title"></div>
13     <!-- directive: my-title -->
14     <div ng-controller="myCtr">
15         <input type="text" ng-model="msg">
16         <p my-title msg-data="{{msg}}">{{msg}}</p>
17         <h1>{{msg}}</h1>
18     </div>
19 
20 <script src="angular.min.js"></script>
21 <script>
22 var app = angular.module("myApp", [])
23 .controller('myCtr', function($scope){
24     $scope.msg = "德瑪西亞";
25 })
26 .directive("myTitle",function(){
27     return {
28         restrict: 'A',
29         controller: function($scope){
30             $scope.msg = "還有誰";
31         },
32         scope: true　　　　　　//默認是false,表示其做用域和父做用域相同,當爲true時表示他們有各自的做用域互不干擾
33     }
34 })
35 
36 </script>
37 </body>
38 </html>

看上面代碼，不難發現angularJS支持連綴，這是由於angular的方法會返回一個對象即上面的"app",因此其能夠像jQuery同樣連綴spa

scope還能夠是一個對象，如：scala

1  template: '<em>{{msg}}</em>', //將父做用域msg變斜體後以模板的形式加載到子做用域
2
3  scope: {
4            msg: '@msgData'    //對應上面代碼的msg-data,其功能是將子做用域msg指向父做用域msg,便於上一步中的模板加載操做
5        }

這樣一來，子做用域的p標籤也會渲染爲 "德瑪西亞"rest

經過上面分析，咱們發現可不能夠在自定義指令中自定義方法呢？答案是可疑的，那就是link閃亮登場的時候了，個人大刀早已飢渴難耐了！！！code

代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7     <title>test</title>
 8 </head>
 9 <body ng-app="myApp">
10     <div repeat-num="3">我愛中華   //自定義指令,將div重複渲染3次
11         
12     </div>
13     
14 <script src="angular.min.js"></script>
15 <script>
16 var app = angular.module("myApp", []);
17 
18 app.directive("repeatNum", function(){
19     return {
20         restrict: 'A',
21         link: function(m,T,bc) {　　　　//這三個參數是經過console.log(this);console.log(arguments);來查看的
22             var num = bc.repeatNum;　　//獲取上面repeat-num的值
23             console.log(this);    
24             console.log(arguments);
25             for(var i = 0; i < num; i++){  //for循環實現屢次渲染
26                 var cDom = T.clone();      //克隆div
27                 T.after(cDom);             //將克隆好的div加在現有的div以後
28             }
29         }
30   
31     }
32 })
33 
34 </script>
35 </body>
36 </html>

如上圖所示link方法共有5個參數其中三個是：m、T、bc，m表示做用域，T表示自定義指令做用的元素即div，bc表示其屬性

固然了咱們也能夠對其子元素自定義操做，即屢次渲染等，以下代碼片斷：

1 <div repeat-num="3">
2     <h1>我覺得你不會選我呢</h1>
3 </div>

app.directive("repeatNum", function(){
    return {
        restrict: 'A',
        link: function(m,T,bc) {
            var num = bc.repeatNum;
            var cDom = T.children();　　    //找到自定義指令操做元素的子節點
            for(var i = 0; i < num; i++){
                T.append(cDom.clone());    //將其子元素克隆並加入父元素
            }
        }    
    }
})