AngularJS 自訂指令詳解及執行個體代碼

AngularJS 自訂指令詳解及執行個體代碼_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

AngularJS支援使用者自訂標籤屬性，在不需要使用DOM節點操作的情況下，添加自訂的內容。

前面提到AngularJS的四大特性：

　　1 MVC

　　2 模組化

　　3 指令

　　4 雙向資料繫結

下面將會介紹如下的內容：

　　1 如何自訂指令

　　2 自訂指令的使用

　　3 自訂指令的內嵌使用

　　如何自訂指令：

　　Angular是基於模組的架構，因此上來肯定要建立一個自己的模組：

var myAppModule = angular.module("myApp",[]);

　　然後在此模組基礎上建立指令directive

 myAppModule.directive("xingoo",function(){    return{     restrict:'AECM',     template:'<div>hello my directive</div>',     repalce:true    }   });

　　其中，xingoo是我們自訂標籤的名字，後面跟著它的方法函數。

　　函數return了一個索引值對組合，其中定義了標籤的使用方法、屬性等等內容。

　　那麼看看它都定義了哪些內容吧：

　　1 restrict：定義了標籤的使用方法，一共四種，分別是AECM

　　2 template：定義標籤的模板。裡面是用於替換自訂標籤的字串

　　3 repalce：是否支援替換

　　4 transclude：是否支援內嵌

　　如何使用指令：

　　上面提到了標籤的四種使用方法，即AECM。

　　A attribute屬性：當做屬性來使用

　　E element元素：當做標籤元素來使用

　　C class類：當做CSS樣式來使用

　　M comments注釋：當做注釋使用（這種方式在1.2版本下親測不可用！）

<div></div>

　　一般來說推薦，當做屬性和元素來使用。

　　當想要在現有的html標籤上擴充屬性時，採用屬性的方式。

　　當想要自訂標籤時，採用標籤的形式。

　　想要使用那種方式，必須要在定義directive中的restrict裡面聲明對應的字母。

　　指令的內嵌使用：

　　因為標籤內部可以嵌套其他的標籤，因此想要在自訂標籤中嵌套其他的元素標籤，則需要：

　　1 使用transclude屬性，設定為true。

　　2 並使用ng-transclude屬性，定義內部嵌套的位置。

　　代碼如下：

  myAppModule.directive("test",function(){    return{     restrict:'AECM',     transclude:true,     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"    }   });

　　全部代碼

<!doctype html><html ng-app="myApp"> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body>    <xingoo></xingoo>  <div xingoo></div>  <div class="xingoo"></div>  <!-- directive:xingoo -->  <div></div>  <hr>  <xingoo>3333</xingoo>  <hr>  <test>4444</test>  <script type="text/javascript">   var myAppModule = angular.module("myApp",[]);   myAppModule.directive("xingoo",function(){    return{     restrict:'AECM',     template:'<div>hello my directive</div>',     repalce:true    }   });   myAppModule.directive("test",function(){    return{     restrict:'AECM',     transclude:true,     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"    }   });  </script> </body></html>

　　運行結果

以上就是對AngularJS 自訂指令的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More