在《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. 微信
