快捷導(dǎo)航

angular directive的簡單使用總結(jié)

更新時間：2017年05月24日 10:05:39 作者：lincimy

directive（指令）是angular的一個非常強(qiáng)大又有用的功能，它相當(dāng)于實現(xiàn)了組件化的概念，我們可以通過它公共地自定義DOM元素或CLASS類或ATTR屬性，并且在這基礎(chǔ)上進(jìn)行操作scope、綁定事件等等

摘要

directive（指令）是angular的一個非常強(qiáng)大又有用的功能，它相當(dāng)于實現(xiàn)了組件化的概念。我們可以通過它公共地自定義DOM元素或CLASS類或ATTR屬性，并且在這基礎(chǔ)上進(jìn)行操作scope、綁定事件等等。將一些公共的模塊或操作封裝到指令中，然后就可以在html頁面中編寫簡單的一行代碼就可以加載整個公共模塊，大大避免了代碼的冗余。一般使用directive有以下場景：

使html更具有語義化，不需要深入研究和了解邏輯即可知道頁面的大致邏輯；
抽象出一個自定義的組件，以便在其他地方可以進(jìn)行復(fù)用。

下面我想通過一些實例結(jié)合分析對我所了解的directive進(jìn)行一些簡單的歸納總結(jié)（我所使用的是angular1.5.3）：

一、Directive的使用

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

二、一個簡單的實例

html代碼：

<!DOCTYPE html>
<html ng-app='helloApp'>
 <body>
  <hello></hello>
 </body>

 <script src="js/angular.min.js"></script>
 <script src="js/helloDirective.js"></script>
</html>

js代碼：

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

效果截圖：

實例解析：

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

E - 元素名稱： <my-directive></my-directive>
A - 屬性名：<div my-directive=”exp”></div>
C - class名： <div class=”my-directive:exp;”></div>
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)行加載。因為模版加載是異步的，所以compilation、linking都會暫停，等待加載完畢后再執(zhí)行。

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

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

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

修改上面實例代碼：

<!DOCTYPE html>
<html ng-app='helloApp' ng-controller="myController">
 <body>
  <hello>{{myName}}</hello>
 </body>

 <script src="js/angular.min.js"></script>
 <script src="js/helloDirective.js"></script>
</html>
var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
 return {
  restrict: 'E',
  template: '<div>Hello,my name is <span ng-transclude></span></div>',
  replace: true,
  transclude:true
 };
});

效果截圖：

解析：

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

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

實例代碼：

phonecatDirectives.directive('exampleDirective', function() { 
 return { 
  restrict: 'E', 
  template: '<p>Hello {{number}}!</p>', 
  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 
<body ng-app="phonecatApp"> 
 <div ng-controller="directive2"> 
  <example-directive></example-directive> 
 </div> 
</body>

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