directive如何在angular中使用？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、東港網(wǎng)站維護、網(wǎng)站推廣。

一、Directive的使用

angular.module("app",[]).directive("directiveName",function(){
return{
//通過設(shè)置項來定義
};
})

二、一個簡單的實例

html代碼：

js代碼：

var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
 return {
  restrict: 'E',
  template: '
Hello,friends!
',
  replace: true
 };
});

效果截圖：

實例解析：

1、restrict：EACM的子集的字符串，它限制directive為指定的聲明方式。

1. E - 元素名稱：

2. A - 屬性名：

3. C - class名：

4. M - 注釋 ：

2、默認(rèn)情況下，directive將僅僅允許通過屬性聲明，ECA較常用。

template：指令顯示的模板內(nèi)容，一般由html標(biāo)簽和文本組成。通常情況下html內(nèi)容較簡單的情況下使用，模板內(nèi)容復(fù)雜的建議將公共部分抽離到html文件中，使用templateUrl屬性。

templateUrl - 與template基本一致，但模版通過指定的url進行加載。因為模版加載是異步的，所以compilation、linking都會暫停，等待加載完畢后再執(zhí)行。

3、replace：如果設(shè)置為true，那么模版將會替換當(dāng)前元素，而不是作為子元素添加到當(dāng)前元素中。（注：為true時，模版必須有一個根節(jié)點）

上述實例dom節(jié)點截圖：

三、實例2：關(guān)于transclude

修改上面實例代碼：

 
  {{myName}}
 

 
 

var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
 return {
  restrict: 'E',
  template: '
Hello,my name is 
',
  replace: true,
  transclude:true
 };
});

效果截圖：

解析：

transclude：指令的作用是把我們自定義的語義化標(biāo)簽替換成瀏覽器能夠認(rèn)識的HTML標(biāo)簽。上述例子replace設(shè)置為true，模版將會替換當(dāng)前元素。而transclude設(shè)置為true的作用可以簡化地理解成：把標(biāo)簽替換成我們所編寫的HTML模板，但是標(biāo)簽內(nèi)部的內(nèi)容保持不變。而則是指明標(biāo)簽內(nèi)部內(nèi)容插入到模板內(nèi)容的哪個位置。

四、實例3：關(guān)于compile，link和controller

實例代碼：

phonecatDirectives.directive('exampleDirective', function() { 
 return { 
  restrict: 'E', 
  template: '
Hello {{number}}!
', 
  controller: function($scope, $element){ 
   $scope.number = $scope.number + "22222 "; 
  }, 
  link: function(scope, el, attr) { 
   scope.number = scope.number + "33333 "; 
  }, 
  compile: function(element, attributes) { 
   return { 
    pre: function preLink(scope, element, attributes) { 
     scope.number = scope.number + "44444 "; 
    }, 
    post: function postLink(scope, element, attributes) { 
     scope.number = scope.number + "55555 "; 
    } 
   }; 
  } 
 } 
}); 

//controller.js添加 
dtControllers.controller('directive2',['$scope', 
 function($scope) { 
  $scope.number = '1111'; 
 } 
]); 

//html 
 
  
   
 

Hello 1111 22222 44444 55555!

Hello 1111 22222 33333!