使用 AngularJS 指令增強(qiáng) HTML

AngularJS 的主要特點(diǎn)是它允許我們擴(kuò)展 HTML 的功能來服務(wù)于當(dāng)今動(dòng)態(tài)網(wǎng)頁(yè)的目的。在本文中，我將向您展示如何使用 AngularJS 的指令來使您的開發(fā)更快、更輕松，并且使您的代碼更易于維護(hù)。

準(zhǔn)備

第 1 步：HTML 模板

為了讓事情變得更簡(jiǎn)單，我們將把所有代碼編寫在一個(gè) HTML 文件中。創(chuàng)建它并將基本的 HTML 模板放入其中：

現(xiàn)在將來自 Google CDN 的 angular.min.js 文件添加到文檔的

中：

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

第 2 步：創(chuàng)建模塊

現(xiàn)在讓我們?yōu)橹噶顒?chuàng)建模塊。我將其稱為 example，但您可以選擇任何您想要的名稱，只需記住我們將使用此名稱作為稍后創(chuàng)建的指令的命名空間。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

將此代碼放在

底部的腳本標(biāo)記中：

var module = angular.module('example', []); 

我們沒有任何依賴項(xiàng)，因此 angular.module() 的第二個(gè)參數(shù)中的數(shù)組為空，但不要完全刪除它，否則您將得到 $injector:nomod錯(cuò)誤，因?yàn)?angular.module() 的單參數(shù)形式檢索對(duì)已存在模塊的引用，而不是創(chuàng)建新模塊。

您還必須將 ng-app=”example” 屬性添加到

標(biāo)記才能使應(yīng)用程序正常工作。之后文件應(yīng)如下所示：

               <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script><script> var module = angular.module('example', []); </script>

屬性指令：1337 C0NV3R73R

首先，我們將創(chuàng)建一個(gè)簡(jiǎn)單的指令，其工作方式與 ngBind 類似，但它將把文本更改為 leet talk。

第 1 步：指令聲明

使用 module.directive() 方法聲明指令：

module.directive('exampleBindLeet', function () { 

第一個(gè)參數(shù)是指令的名稱。它必須采用駝峰式命名法，但由于 HTML 不區(qū)分大小寫，因此您將在 HTML 代碼中使用破折號(hào)分隔的小寫形式 (example-bind-leet)。

作為第二個(gè)參數(shù)傳遞的函數(shù)必須返回一個(gè)描述該指令的對(duì)象。目前它只有一個(gè)屬性：鏈接函數(shù)：

    return { 		link: link 	}; }); 

第2步：鏈接函數(shù)

您可以在 return 語(yǔ)句之前定義函數(shù)，也可以直接在返回的對(duì)象中定義該函數(shù)。它用于操作我們的指令所應(yīng)用的元素的 DOM，并使用三個(gè)參數(shù)進(jìn)行調(diào)用：

function link($scope, $elem, attrs) { 

$scope 是一個(gè) Angular 范圍對(duì)象，$elem 是該指令匹配的 DOM 元素（它包裝在 jqLit??e 中，jqLit??e 是 AngularJS 的 jQuery 最常用函數(shù)的子集） attrs 是一個(gè)具有所有元素屬性的對(duì)象（具有規(guī)范化名稱，因此 example-bind-leet 將可用作 attrs.exampleBindLeet）。

我們的指令中此函數(shù)的最簡(jiǎn)單的代碼如下所示：

    var leetText = attrs.exampleBindLeet.replace(/[abegilostz]/gmi, function (letter) { 	    return leet[letter.toLowerCase()];     });  	$elem.text(leetText); } 

首先，我們將 example-bind-leet 屬性中提供的文本中的一些字母替換為 leet 表中的替換內(nèi)容。該表如下所示：

var leet = {     a: '4', b: '8', e: '3', 	g: '6', i: '!', l: '1', 	o: '0', s: '5', t: '7', 	z: '2' }; 

您應(yīng)該將其放在 <script> 標(biāo)記的頂部。正如您所看到的，這是最基本的 leet 轉(zhuǎn)換器，因?yàn)樗鼉H替換十個(gè)字符。</script>

之后，我們將字符串轉(zhuǎn)換為 leet say，我們使用 jqLit??e 的 text() 方法將其放入該指令匹配的元素的內(nèi)部文本中。

現(xiàn)在您可以通過將此 HTML 代碼放入文檔的

中來測(cè)試它：

<div example-bind-leet="This text will be converted to leet speak!"></div> 

輸出應(yīng)如下所示：

但這并不完全是 ngBind 指令的工作原理。我們將在接下來的步驟中改變這一點(diǎn)。

第 3 步：范圍

首先，example-bind-leet 屬性中傳遞的應(yīng)該是對(duì)當(dāng)前作用域中變量的引用，而不是我們要轉(zhuǎn)換的文本。為此，我們必須為指令創(chuàng)建一個(gè)隔離的范圍。

我們可以通過將作用域?qū)ο筇砑拥街噶詈瘮?shù)的返回值來實(shí)現(xiàn)這一點(diǎn)：

module.directive('exampleBindLeet', function () {     ... 	return { 		link: link, 		scope: {  		} 	}; ); 

該對(duì)象中的每個(gè)屬性都將在指令的范圍內(nèi)可用。它的值將由這里的值決定。如果我們使用“-”，則該值將等于與屬性同名的屬性的值。使用“=”將告訴編譯器我們期望傳遞當(dāng)前作用域中的變量 – 這將像 ngBind:

一樣工作

scope: { 	exampleBindLeet: '=' } 

您還可以使用任何內(nèi)容作為屬性名稱，并將規(guī)范化（轉(zhuǎn)換為駝峰命名法）的屬性名稱放在 – 或 = 后面：

scope: { 	text: '=exampleBindLeet' } 

選擇最適合您的。現(xiàn)在我們還必須更改鏈接函數(shù)以使用 $scope 而不是 attr：

function link($scope, $elem, attrs) {     var leetText = $scope.exampleBindLeet.replace(/[abegilostz]/gmi, function (letter) { 		return leet[letter.toLowerCase()]; 	});  	$elem.text(leetText); } 

現(xiàn)在使用 ngInit 或創(chuàng)建一個(gè)控制器，并將 div 的 example-bind-leet 屬性的值更改為您使用的變量的名稱：

       <div example-bind-leet="textToConvert"></div>    

第 4 步：檢測(cè)更改

但這仍然不是 ngBind 的工作原理。要查看我們添加一個(gè)輸入字段以在頁(yè)面加載后更改 textToConvert 的值：

<input ng-model="textToConvert">

現(xiàn)在，如果您打開頁(yè)面并嘗試更改輸入中的文本，您將看到我們的 div 中沒有任何變化。這是因?yàn)?link() 函數(shù)在編譯時(shí)每個(gè)指令都會(huì)調(diào)用一次，因此它無(wú)法在每次范圍內(nèi)發(fā)生更改時(shí)更改元素的內(nèi)容。

要改變這一點(diǎn)，我們將使用 $scope.$watch() 方法。它接受兩個(gè)參數(shù)：第一個(gè)是 Angular 表達(dá)式，每次修改范圍時(shí)都會(huì)對(duì)其進(jìn)行求值，第二個(gè)是回調(diào)函數(shù)，當(dāng)表達(dá)式的值發(fā)生更改時(shí)將被調(diào)用。

首先，讓我們將 link() 函數(shù)中的代碼放入其中的本地函數(shù)中：

function link($scope, $elem, attrs) {     function convertText() { 		var leetText = $scope.exampleBindLeet.replace(/[abegilostz]/gmi, function (letter) { 			return leet[letter.toLowerCase()]; 		});  		$elem.text(leetText); 	} } 

現(xiàn)在，在該函數(shù)之后，我們將調(diào)用 $scope.$watch()，如下所示：

$scope.$watch('exampleBindLeet', convertLeet); 

如果您現(xiàn)在打開頁(yè)面并更改輸入字段中的某些內(nèi)容，您將看到 div 的內(nèi)容也按預(yù)期發(fā)生了變化。

元素指令：進(jìn)度條

現(xiàn)在我們將編寫一個(gè)指令來為我們創(chuàng)建一個(gè)進(jìn)度條。為此，我們將使用一個(gè)新元素：。

第 1 步：樣式

為了讓我們的進(jìn)度條看起來像一個(gè)進(jìn)度條，我們必須使用一些 CSS。將此代碼放入文檔的

中的