當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS 详解Directive（指令）机制

發布時間：2023/12/15 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJS 详解Directive（指令）机制小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

AngularJS ?5個實例詳解Directive（指令）機制

大漠窮秋 ?http://damoqiongqiu.iteye.com/blog/1917971

1.一點小說明

指令的作用：實現語義化標簽

我們常用的HTML標簽是這樣的：

<div><span>一點點內容</span> </div>

而使用AngularJS的directive（指令）機制，我們可以實現這樣的東西：

很多人可能看出，這和JSP或者Struts等等框架里面的taglib很像啊！

呃，說實話，實際上就是這樣的，只不過這里是使用JavaScript來實現的。正因為如此，所以很多taglib做不到的功能，使用它就都可以做到，比如訪問N層scope里面的對象之類的事情（參見后面第5個例子）。

2.實例1：從最簡單的開始

? ? 【注意： directive的命名--1. 都為字符，不能有下劃線； 2.如果使用駝峰命名方法，則在使用時，要使用-隔開駝峰詞；如trHello,則HTML中使用tr-Hello】?

對于以上代碼里面的<hello>標簽，瀏覽器顯然是不認識的，它唯一能做的事情就是無視這個標簽。那么，為了讓瀏覽器能夠認識這個標簽，我們需要使用Angular來定義一個hello指令（本質上說就是自己來把<hello>這種玩意兒替換成瀏覽器能識別的那些標準HTML標簽）。

來看這段溫馨的JS代碼：

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

以上代碼大概看兩眼就可以了，不要太在意細節。

然后我們就可以在瀏覽器里面看到這樣的內容：

實際產生的標簽結構是這樣的：

可以看到，<hello>這個東東已經被<div>Hi there</div>這個標簽替換掉了，這也是以上JS代碼里面replace:true這行配置的作用，代碼里面的template配置項當然就是我們要的div標簽啦，至于restrict:'E'這個配置項的含義，請看下表：

ok，看完上面的表格，對于restrict這個屬性相信你已經秒懂了，那么我們來玩兒點花樣吧。如果我們需要替換的HTML標簽很長，顯然不能用拼接字符串的方式來寫，這時候我們可以用templateUrl來替代template，從而可以把模板寫到一個獨立的HTML文件中。

3.實例2：transclude（變換）

先看例子，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>原始的內容，</span><br/><span>還會在這里。</span></hello><hello></hello></body><script src="../angular-1.0.3/angular.min.js"></script><script src="Transclude.js"></script> </html>

運行效果如下：

生成的HTML標簽結構如下：

和第一個例子對比，這個例子的JS和HTML代碼都略有不同，JS代碼里面多了一個transclude: true，HTML代碼里面在<hello>內部出現了子標簽。

按照我們在第一個例子中的說法，指令的作用是把我們自定義的語義化標簽替換成瀏覽器能夠認識的HTML標簽。那好，如果我們自定義的標簽內部出現了子標簽，應該如何去處理呢？很顯然，transclude就是用來處理這種情況的。

對于當前這個例子，transclude的作用可以簡化地理解成：把<hello>標簽替換成我們所編寫的HTML模板，但是<hello>標簽內部的內容保持不變。

很顯然，由于我們沒有加replace:true選項，所以<hello>標簽還在，沒有被替換掉。同時，通過這個例子你還還會發現一個暗藏的屬性，那就是瀏覽器實際上非常智能，雖然它并不認識<hello>這個標簽，但是頁面沒有出錯，它只是默默地把這個標簽忽略掉了！怎么樣？是不是碉堡了？

你可以自己在上面的JS代碼里面加上replace:true，然后再看生成的HTML結構。

4.實例3：關于compile和link

JS代碼：

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>

呃，這個例子是用來解釋一點點理論的，所以單純看效果可能看不出個鳥。

如前所述，指令的本質其實是一個替換過程。好，既然如此，Angular到底是如何進行替換的呢？嗯嗯，這個過程分2個階段，也就是本節標題所說的compile（編譯）和link（連接）了。

簡而言之，compile階段進行標簽解析和變換，link階段進行數據綁定等操作。這里面更加細節的處理過程請參見《AngularJS》這本書中的解析，這里就不贅述了（呃，實際上是因為解釋起來很長很麻煩，叔懶得在這兒說了）。

那么，知道這件事情有什么用途呢？

比方說，你有一些事件需要綁定到某個元素上，那么你需要提供一個link函數，做法請看下一個例子。

5.實例4：一個復雜一點的例子Expander

這是《AngularJS》這本書里面提供的一個例子，但是書里面沒有給出完整的可運行代碼，所以這里給出來，大家參考一下。

JS代碼：

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; }

運行效果如下：

注意一下JS代碼里面的這一段：

link : function(scope, element, attrs) {scope.showMe = false;scope.toggle = function toggle() {scope.showMe = !scope.showMe;} }

自己跑一跑例子，研究一番，不多解釋。

6.實例5：一個綜合的例子

JS代碼：

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; }

運行效果：

這個例子主要的難點在于如何在子Expander里面訪問外層Accordion的scope中的數據，這一點解釋起來略復雜，這里就不展開了，詳細描述參見《AngularJS》一書?

總結

以上是生活随笔為你收集整理的AngularJS 详解Directive（指令）机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：我国自研“鲲龙”AG600M 飞机全面进
下一篇：腾讯QQ空间g_tk算法