AngularJS 指令學習之一指令簡介

時間 2019-11-07

標籤 angularjs 指令學習之一簡介欄目 AngularJS 简体版

原文原文鏈接

1.什麼是AngularJS的指令？

HTML元素由一個開始標籤和一個結束標籤組成，基於對此的理解，指令本質上就是AngularJS擴展具備自定義功能的HTML元素的途徑。簡單理解指令就是自定義的HTML元素和屬性。javascript

2.AngularJS指令的組成？

AngularJS指令包括內置和自定義指令，其中內置指令是打包在AngularJS內部的指令。全部內置指令的命名空間都使用ng做爲前綴。html

注：爲了防止命名空間衝突，不要在自定義指令前加ng前綴。java

內置指令包括：express

ng-href, ng-src 是類布爾屬性；瀏覽器

ng-disabled， ng-checked ，ng-readonly ，ng-selected，ng-class ，ng-style 是布爾屬性；緩存

注：根據HTML標準的定義，布爾屬性表明一個 true 或 false 值。當這個屬性出現時，這個屬性的值就是 true （不管實際定義的值是什麼）。若是未出現，這個屬性的值就是 false 。安全

3.建立一個自定義指令

<html ng-app="myApp">
<!-- 應用的$rootScope -->
<my-directive></my-directive>
</html>

咱們首先已經建立了一個完整的HTML的文檔,其中包含了AngularJS,而且DOM中已經用ng-App標識出應用的元素，當AngularJS編譯HTML時就會調用指令。服務器

angular.module('myApp',[])
		.directive('myDirective', function() {
			return {
				restrict: 'E',
				template: '\<div> <-- single root element -->\
							<a href="http://baidu.com">Click me</a>\
							<h1>When using two elements, wrap them in a parent element</h1>\
							</div>\'
				};
		});

經過AngularJS模塊API中的.directive()方法，咱們能夠經過傳入一個字符串和一個函數來註冊一個新指令。其中字符串就是這個指令的名字，指令名應該是駝峯命名風格的，函數應該返回一個對象。 directive()方法返回的對象包含了用來定義和配置指令所需的方法和屬性。app

3.1 restrict （字符串）

restrict 是一個可選的參數,它告訴AngularJS這個指令在DOM中能夠何種形式被聲明。restrict設置能夠指定以元素（E）、屬性（A）、類（C）或註釋（M）的格式來調用指令，用來聲明前面建立指令的合法格式，默認AngularJS認爲 restrict 的值是屬性（A），即以屬性的形式來進行聲明。異步

// E（元素）
<my-directive></my-directive>

// A（屬性，默認值）
<div my-directive="expression"></div>

// C（類名）
<div class="my-directive:expression;"></div>

// M（註釋）
<--directive:my-directive expression-->

注：雖然有不少方式能夠聲明指令，可是推薦使用屬性方式聲明，這是由於其跨瀏覽器兼容性比較好。儘可能避免用註釋方式來聲明屬性。這種方式最初被用來聲明由多個標籤組成的指令。這種方法在某些狀況下特別有用，好比在元素內使用 ng-repeat指令，但在 AngularJS 1.2 中 ng-repeat 可以通過 ng-repeat-start 和ng-repeat-end 來更優雅地知足這個需求，註釋模式就沒有什麼用武之地了。若是你對此很好奇，能夠經過Chrome開發者工具的 element 標籤觀察一下使用ng-repeat 時被隱式添加的註釋。

3.2 replace （布爾值）

replace 方法會使用自定義元素取代指令聲明，而不是嵌套在其內部。replace 是一個可選參數，若是設置了這個參數，值必須爲 true ，由於默認值爲 false 。默認值意味着模板會被看成子元素插入到調用此指令的元素內部。

3.3 template (字符串或函數)

template參數是可選的，能夠是一段HTML文本，也能夠是一個能夠接受兩個參數的函數，參數爲 tElement 和 tAttrs ，並返回一個表明模板的字符串。

tElement 和 tAttrs 中的 t 表明 template ，是相對於 instance 的。若是模板字符串中含有多個DOM元素，或者只由一個單獨的文本節點構成，那它必須被包含在一個父元素內。換句話說，必須存在一個根DOM元素,另外，注意每一行末尾的反斜線，這樣AngularJS才能正確解析多行字符串。

在實際生產中，更好的選擇是使用 templateUrl 參數引用外部模板，由於多行文本閱讀和維護起來對咱們來講都是一場噩夢。

//template.html

<div> 
 <a href="http://baidu.com">Click me</a>
 <h1>When using two elements, wrap them in a parent element</h1>
</div>

angular.module('myApp',[])
		.directive('myDirective', function() {
			return {
				restrict: 'E',
				templateUrl: 'template.html'
				};
		});

3.4 templateUrl (字符串或函數)

templateUrl 是可選的參數，一個是表明外部HTML文件路徑的字符串，一個是能夠接受2個參數，參數爲tElement和tAtrrs,並返回一個外部HTML文件路徑的字符串。

不管哪一種方式，模板的URL都將經過AngularJS內置的安全層，特別是$getTrustedResourceUrl,這樣能夠保護模板不會被不信任的源加載。

默認狀況下，調用指令時會在後臺經過Ajax來請求HTML模板文件。

注：在本地開發時，須要在後臺運行一個本地服務器，用以從文件系統加載HTML模板，不然會致使Cross Origin Request Script(CORS)錯誤。模板加載時異步的，意味着編譯和連接要暫停，等待模板加載完成。可是，經過Ajax異步加載大量的模板將嚴重拖慢一個客戶端的速度。爲了不延遲，能夠在部署應用以前對HTML模板進行緩存。

參考資料：