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

2019-11-19 16:30:42

字體：大中小

供稿：網(wǎng)友

摘要

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

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

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

一、Directive的使用

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

二、一個(gè)簡(jiǎn)單的實(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 };});

效果截圖：

實(shí)例解析：

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)容較簡(jiǎn)單的情況下使用，模板內(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í)例代碼：

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

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

實(shí)例代碼：

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é)果：