在《AngularJS入門心得1——directive和controller如何通信》我們提到“AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。這里AngularJS就應運而生，彌補了HTML的天然缺陷，用於構件Web應用等。”
那么AngularJS如何彌補HTML的缺陷，指令可能是最好的回答。
指令是什么？？？
指令就是一些附加在HTML元素上的自定義標記（可以是屬性A、元素E、css類C），可以通過AngularJS的HTML編譯器（$compile）對這些標記附加指定的行為，或者操作DOM、改變DOM元素等。
說白了，就是HTML定義的標簽不夠多，不夠強大，AngularJS通過指令可以讓HTML識別更多的標簽，具備更強的功能。
1.指令的規范化
在HTML命名規范中，因為不區分大小寫，所以類似myCustomer和mycustomer是一樣的，那么如何在HTML定義指令呢，常見的可以通過
（1） 加前綴：”x-“和”data-”
（2） 在指令名之間添加間隔符：”:”,”-”,”_”
那么如何將HTML中的指令名轉化為js中的變量，相應的，有兩種方式：
（1） 從元素或屬性的名字前面去掉x- and data-
（2） 從:, -, 或 _分隔的形式轉換成小駝峰命名法(camelCase)
舉例：
HTML（通過分隔符標示）：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div my-customer></div>
</div>
</body>
</html>
HTML（通過前綴標示）：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div data-my-customer></div>
</div>
</body>
</html>
script.js：
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
})(window.angular);
通過在Plunker中的實時顯示結果如下：
（ps：Plunker介紹
簡介：Plunker is an online community for creating, collaborating on and sharing your web development ideas. Plunker 是一個用來創建、協作和分享 Web 開發思路的在線社區。
官網地址：http://plnkr.co/
特點：
基於 Node.js 環境運行
實時的代碼協作
全功能、可定制語法編輯器
代碼更改可即時預覽效果
代碼提示
可 Fork、評論和分享
完全開源，使用 MIT 許可
）
2.指令匹配
AngularJS的$complie編譯器可以基於元素、屬性、類名以及注釋來匹配指令。如：
<my-customer></my- customer >//元素 <span my- customer ="exp"></span>//屬性 <!-- directive: my- customer exp -->//注釋 <span class="my- customer: exp;"></span>//類名
注意：雖然上面的4種形式都可以進行指令匹配，但是，最好通過標簽名和屬性來使用指令而不要通過注釋和類名。這樣做可以更容易地看出一個元素是跟哪個指令匹配的。舉例來說：
（1）通過元素匹配
index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<my-customer></my-customer>
</div>
</body>
</html>
script.js：
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
})(window.angular);
在html中聲明元素標簽<my-customer></my-customer>，在js中通過”restrict：‘E’”表示是通過元素來匹配。
（2）通過屬性匹配
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div my-customer></div>
</div>
</body>
</html>
script.js:
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
restrict: 'A',
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
})(window.angular);
在html中聲明元素標簽<div my-customer></div>，標簽div中聲明了屬性my-customer，在js中通過”restrict：‘A’”表示是通過元素來匹配。
當然，以上的頁面顯示結果都是：
其實本篇本來是要重點說說scope的理解以及舉個例子來聊聊獨立scope的一些機制，但是梳理一下就寫完了這篇。
最近一直在熟悉業務，一直也沒有跟進AngularJS，倒是在重新認識Javascript，只能說之前對於js的理解實在太淺，后面有時間會繼續跟進javascript。
本文鏈接：《AngularJS入門心得3——HTML的左右手指令》
如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！如果您想持續關注我的文章，請掃描二維碼，關注JackieZheng的微信公眾號，我會將我的文章推送給您，並和您一起分享我日常閱讀過的優質文章。
友情贊助
如果你覺得博主的文章對你那么一點小幫助，恰巧你又有想打賞博主的小沖動，那么事不宜遲，趕緊掃一掃，小額地贊助下，攢個奶粉錢，也是讓博主有動力繼續努力，寫出更好的文章^^。
1. 支付寶 2. 微信
