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

一、Directive的使用

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

二、一個(gè)簡單的實(shí)例

html代碼：

js代碼：

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

效果截圖：

實(shí)例解析：

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進(jìn)行加載。因?yàn)槟０婕虞d是異步的，所以compilation、linking都會(huì)暫停，等待加載完畢后再執(zhí)行。

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

上述實(shí)例dom節(jié)點(diǎn)截圖：

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

修改上面實(shí)例代碼：

 
  {{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)識(shí)的HTML標(biāo)簽。上述例子replace設(shè)置為true，模版將會(huì)替換當(dāng)前元素。而transclude設(shè)置為true的作用可以簡化地理解成：把標(biāo)簽替換成我們所編寫的HTML模板，但是標(biāo)簽內(nèi)部的內(nèi)容保持不變。而則是指明標(biāo)簽內(nèi)部內(nèi)容插入到模板內(nèi)容的哪個(gè)位置。

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

實(shí)例代碼：

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