本文整理并擴(kuò)展了《AngularJS》這本書第六章里面的內(nèi)容，此書近期即將由電子工業(yè)出版社出版，敬請(qǐng)期待口令：Angular
指令的作用：實(shí)現(xiàn)語義化標(biāo)簽
我們常用的HTML標(biāo)簽是這樣的：
<div> <span>一點(diǎn)點(diǎn)內(nèi)容</span></div>
而使用AngularJS的directive（指令）機(jī)制，我們可以實(shí)現(xiàn)這樣的東西：
<tabpanel> <panel>子面板1</panel> <panel>子面板2</panel></tabpanel>
很多人可能要驚呼，這貨和JSP或者Struts等等框架里面的taglib很像啊！
呃，說實(shí)話，實(shí)際上就是這樣的，只不過這里是使用JavaScript來實(shí)現(xiàn)的。正因?yàn)槿绱?，所以很多taglib做不到的功能，使用它就都可以做到，比如訪問N層scope里面的對(duì)象之類的事情（參見后面第5個(gè)例子）。
<html ng-app='app'> <body> <hello></hello> </body> <script src="../angular-1.0.3/angular.min.js"></script> <script src="HelloDirect.js"></script></html>
對(duì)于以上代碼里面的<hello>標(biāo)簽，瀏覽器顯然是不認(rèn)識(shí)的，它唯一能做的事情就是無視這個(gè)標(biāo)簽。那么，為了讓瀏覽器能夠認(rèn)識(shí)這個(gè)標(biāo)簽，我們需要使用Angular來定義一個(gè)hello指令（本質(zhì)上說就是自己來把<hello>這種玩意兒替換成瀏覽器能識(shí)別的那些標(biāo)準(zhǔn)HTML標(biāo)簽）。
來看這段溫馨的JS代碼：
var appModule = angular.module('app', []);appModule.directive('hello', function() { return { restrict: 'E', template: '<div>Hi there</div>', replace: true };});
以上代碼大概看兩眼就可以了，不要太在意細(xì)節(jié)。
然后我們就可以在瀏覽器里面看到這樣的內(nèi)容：
實(shí)際產(chǎn)生的標(biāo)簽結(jié)構(gòu)是這樣的：
可以看到，<hello>這個(gè)東東已經(jīng)被<div>Hi there</div>這個(gè)標(biāo)簽替換掉了，這也是以上JS代碼里面replace:true這行配置的作用，代碼里面的template配置 項(xiàng)當(dāng)然就是我們要的div標(biāo)簽啦，至于restrict:'E'這個(gè)配置項(xiàng)的含義，請(qǐng)看下表：
ok，看完上面的表格，對(duì)于restrict這個(gè)屬性相信你已經(jīng)秒懂了，那么我們來玩兒點(diǎn)花樣吧。如果我們需要替換的HTML標(biāo)簽很長，顯然不能用 拼接字符串的方式來寫，這時(shí)候我們可以用templateUrl來替代template，從而可以把模板寫到一個(gè)獨(dú)立的HTML文件中。
先看例子，JS代碼：
var appModule = angular.module('app', []); appModule.directive('hello', function() { return { restrict: 'E', template: '<div>Hi there <span ng-transclude></span></div>', transclude: true };});
HTML代碼：
<html ng-app='app'> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <hello> <br/> <span>原始的內(nèi)容，</span><br/> <span>還會(huì)在這里。</span> </hello> <hello> </hello> </body> <script src="../angular-1.0.3/angular.min.js"></script> <script src="Transclude.js"></script></html>
運(yùn)行效果如下：
生成的HTML標(biāo)簽結(jié)構(gòu)如下：
和第一個(gè)例子對(duì)比，這個(gè)例子的JS和HTML代碼都略有不同，JS代碼里面多了一個(gè)transclude: true，HTML代碼里面在<hello>內(nèi)部出現(xiàn)了子標(biāo)簽。
按照我們?cè)诘谝粋€(gè)例子中的說法，指令的作用是把我們自定義的語義化標(biāo)簽替換成瀏覽器能夠認(rèn)識(shí)的HTML標(biāo)簽。那好，如果我們自定義的標(biāo)簽內(nèi)部出現(xiàn)了子標(biāo)簽，應(yīng)該如何去處理呢？很顯然，transclude就是用來處理這種情況的。
對(duì)于當(dāng)前這個(gè)例子，transclude的作用可以簡化地理解成：把<hello>標(biāo)簽替換成我們所編寫的HTML模板，但是<hello>標(biāo)簽內(nèi)部的內(nèi)容保持不變。
很顯然，由于我們沒有加replace:true選項(xiàng)，所以<hello>標(biāo)簽還在，沒有被替換掉。同時(shí)，通過這個(gè)例子你還還會(huì)發(fā)現(xiàn)一 個(gè)暗藏的屬性，那就是瀏覽器實(shí)際上非常智能，雖然它并不認(rèn)識(shí)<hello>這個(gè)標(biāo)簽，但是頁面沒有出錯(cuò)，它只是默默地把這個(gè)標(biāo)簽忽略掉了！怎 么樣？是不是碉堡了？
你可以自己在上面的JS代碼里面加上replace:true，然后再看生成的HTML結(jié)構(gòu)。
JS代碼：
var appModule = angular.module('app', []);appModule.directive('hello', function() { return { restrict: 'E', template: '<span>Hi there</span>', replace: true };});appModule.controller('MyController',function($scope) { $scope.things = [1,2,3,4,5,6];});
HTML代碼：
<html ng-app='app'> <body ng-controller='MyController'> <div ng-repeat='thing in things'> {{thing}}.<hello></hello> </div> </body> <script src="../angular-1.0.3/angular.min.js"></script> <script src="CompileAndLink.js"></script></html>
呃，這個(gè)例子是用來解釋一點(diǎn)點(diǎn)理論的，所以單純看效果可能看不出個(gè)鳥。
如前所述，指令的本質(zhì)其實(shí)是一個(gè)替換過程。好，既然如此，Angular到底是如何進(jìn)行替換的呢？嗯嗯，這個(gè)過程分2個(gè)階段，也就是本節(jié)標(biāo)題所說的compile（編譯）和link（連接）了。
簡而言之，compile階段進(jìn)行標(biāo)簽解析和變換，link階段進(jìn)行數(shù)據(jù)綁定等操作。這里面更加細(xì)節(jié)的處理過程請(qǐng)參見《AngularJS》這本書中的解析，這里就不贅述了（呃，實(shí)際上是因?yàn)榻忉屍饋砗荛L很麻煩，叔懶得在這兒說了
那么，知道這件事情有什么用途呢？
比方說，你有一些事件需要綁定到某個(gè)元素上，那么你需要提供一個(gè)link函數(shù)，做法請(qǐng)看下一個(gè)例子。
這是《AngularJS》這本書里面提供的一個(gè)例子，但是書里面沒有給出完整的可運(yùn)行代碼，所以這里給出來，大家參考一下。
JS代碼：
var expanderModule=angular.module('expanderModule', [])expanderModule.directive('expander', function() { return { restrict : 'EA', replace : true, transclude : true, scope : { title : '=expanderTitle' }, template : '<div>' + '<div class="title" ng-click="toggle()">{{title}}</div>' + '<div class="body" ng-show="showMe" ng-transclude></div>' + '</div>', link : function(scope, element, attrs) { scope.showMe = false; scope.toggle = function toggle() { scope.showMe = !scope.showMe; } } }});expanderModule.controller('SomeController',function($scope) { $scope.title = '點(diǎn)擊展開'; $scope.text = '這里是內(nèi)部的內(nèi)容。';});
HTML代碼：
<html ng-app='expanderModule'> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="../angular-1.0.3/angular.min.js"></script> <link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/> </head> <body> <div ng-controller='SomeController'> <expander class='expander' expander-title='title'> {{text}} </expander> </div> </body> <script src="ExpanderSimple.js"></script></html>
CSS代碼：
.expander { border: 1px solid black; width: 250px;}.expander>.title { background-color: black; color: white; padding: .1em .3em; cursor: pointer;}.expander>.body { padding: .1em .3em;}
運(yùn)行效果如下：
注意一下JS代碼里面的這一段：
link : function(scope, element, attrs) { scope.showMe = false; scope.toggle = function toggle() { scope.showMe = !scope.showMe; }}
自己跑一跑例子，研究一番，不多解釋。
JS代碼：
var expModule=angular.module('expanderModule',[])expModule.directive('accordion', function() { return { restrict : 'EA', replace : true, transclude : true, template : '<div ng-transclude></div>', controller : function() { var expanders = []; this.gotOpened = function(selectedExpander) { angular.forEach(expanders, function(expander) { if (selectedExpander != expander) { expander.showMe = false; } }); } this.addExpander = function(expander) { expanders.push(expander); } } }});expModule.directive('expander', function() { return { restrict : 'EA', replace : true, transclude : true, require : '^?accordion', scope : { title : '=expanderTitle' }, template : '<div>' + '<div class="title" ng-click="toggle()">{{title}}</div>' + '<div class="body" ng-show="showMe" ng-transclude></div>' + '</div>', link : function(scope, element, attrs, accordionController) { scope.showMe = false; accordionController.addExpander(scope); scope.toggle = function toggle() { scope.showMe = !scope.showMe; accordionController.gotOpened(scope); } } }});expModule.controller("SomeController",function($scope) { $scope.expanders = [{ title : 'Click me to expand', text : 'Hi there folks, I am the content that was hidden but is now shown.' }, { title : 'Click this', text : 'I am even better text than you have seen previously' }, { title : 'Test', text : 'test' }];});
HTML代碼：
<html ng-app="expanderModule"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="../angular-1.0.3/angular.min.js"></script> <link rel="stylesheet" type="text/css" href="Accordion.css"/> </head> <body ng-controller='SomeController' > <accordion> <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'> {{expander.text}} </expander> </accordion> </body> <script src="Accordion.js"></script></html>
CSS代碼：
.expander { border: 1px solid black; width: 250px;}.expander>.title { background-color: black; color: white; padding: .1em .3em; cursor: pointer;}.expander>.body { padding: .1em .3em;}
運(yùn)行效果：
這個(gè)例子主要的難點(diǎn)在于如何在子Expander里面訪問外層Accordion的scope中的數(shù)據(jù)，這一點(diǎn)解釋起來略復(fù)雜，這里就不展開了，詳細(xì)描述參見《AngularJS》一書
AngularJS官方站點(diǎn)在這里：http://angularjs.org/
[全文完]
聯(lián)系客服
