AngularJS 自定義指令詳解及實(shí)例代碼

更新時(shí)間：2016年09月14日 15:59:35 作者：xingoo

這篇文章主要介紹了AngularJS 自定義指令，這里整理了詳細(xì)的資料及簡(jiǎn)單實(shí)例代碼，有需要的小伙伴可以參考下

AngularJS支持用戶(hù)自定義標(biāo)簽屬性，在不需要使用DOM節(jié)點(diǎn)操作的情況下，添加自定義的內(nèi)容。

前面提到AngularJS的四大特性：

　　1 MVC

　　2 模塊化

　　3 指令

　　4 雙向數(shù)據(jù)綁定

下面將會(huì)介紹如下的內(nèi)容：

　　1 如何自定義指令

　　2 自定義指令的使用

　　3 自定義指令的內(nèi)嵌使用

　　如何自定義指令：

　　Angular是基于模塊的框架，因此上來(lái)肯定要?jiǎng)?chuàng)建一個(gè)自己的模塊：

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

　　然后在此模塊基礎(chǔ)上創(chuàng)建指令directive

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

　　其中，xingoo是我們自定義標(biāo)簽的名字，后面跟著它的方法函數(shù)。

　　函數(shù)return了一個(gè)鍵值對(duì)組合，其中定義了標(biāo)簽的使用方法、屬性等等內(nèi)容。

　　那么看看它都定義了哪些內(nèi)容吧：

　　1 restrict：定義了標(biāo)簽的使用方法，一共四種，分別是AECM

　　2 template：定義標(biāo)簽的模板。里面是用于替換自定義標(biāo)簽的字符串

　　3 repalce：是否支持替換

　　4 transclude：是否支持內(nèi)嵌

　　如何使用指令：

　　上面提到了標(biāo)簽的四種使用方法，即AECM。

　　A attribute屬性：當(dāng)做屬性來(lái)使用

　　E element元素：當(dāng)做標(biāo)簽元素來(lái)使用

　　C class類(lèi)：當(dāng)做CSS樣式來(lái)使用

　　M comments注釋?zhuān)寒?dāng)做注釋使用（這種方式在1.2版本下親測(cè)不可用?。?/p>

<div></div>

　　一般來(lái)說(shuō)推薦，當(dāng)做屬性和元素來(lái)使用。

　　當(dāng)想要在現(xiàn)有的html標(biāo)簽上擴(kuò)展屬性時(shí)，采用屬性的方式。

　　當(dāng)想要自定義標(biāo)簽時(shí)，采用標(biāo)簽的形式。

　　想要使用那種方式，必須要在定義directive中的restrict里面聲明對(duì)應(yīng)的字母。

　　指令的內(nèi)嵌使用：

　　因?yàn)闃?biāo)簽內(nèi)部可以嵌套其他的標(biāo)簽，因此想要在自定義標(biāo)簽中嵌套其他的元素標(biāo)簽，則需要：

　　1 使用transclude屬性，設(shè)置為true。

　　2 并使用ng-transclude屬性，定義內(nèi)部嵌套的位置。

　　代碼如下：

  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>

　　運(yùn)行結(jié)果