About
关于angularjs的指令学习，小编看了imooc的视频然后翻墙到外面看文章（边看边Google翻译，好好学英语吧骚年们），然后回来写一个总结，写我看到的，写我听到的。
刚刚开始接触angular的时候，只觉得几句话就可以搞定一件事情，代替了之前一堆的AJAX的异步加载。AngularJS is perfect for Single Page Applications (SPAs).这个单页应用程序是什么，通常的说法是它通过避免页面刷新大大提高了网站的响应性，就像桌面应用，如果单页程序放到移动端就像是原生app一样的用户体验。
最开始第一代web是干啥都要去找服务器调资源，从服务器拼接好html通过response来返回静态页面。现在看来，都讲究把经常加载的数据置前，在效率和空间总要选一样的。后来呢，AJAX来了，大家都学会了异步加载，还记得是个XMLHttpRequest 对象，就可以取部分数据异步更新。之后，AngularJS仅需HTML，CSS和JavaScript就可在客户端创建单页面应用。它的目标是是开发和测试更容易，增强MVC
Web应用的性能。前端的料真的原来越来越腻害了呢。
AngularJS Directives
那么指令是什么东东呢，简单说，就是扩展html的一个新的属性。我们可以用定义好的指令完成我们的业务，也可以自定义的封装指令。指令就是一个简单的替换标签的过程，变换成html看得懂的内容。指令都带有一个ng-的前缀。先来个例子给你一个体会。
ng-app：标志着angularjs初始化
ng-init：应用程序数据初始化
ng-model：用来执行数据绑定到元素上面
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="learn='Angular'">
<p>Input something you want to learn:<input type="text" ng-model="learn"></p>
<p>You wrote: {{ learn}}</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
</html>
下面已ng-model为例让大家了解一下指令可以做什么。
Two-Way Binding
在上面的例子中我用到了ng-app，ng-init，ng-model 这样实现了一个简单的angular小呆萌。其中有一个强大的取值表达式：{{}}，通过ng-model="learn" 实现了数据的双向绑定。在修改input的值的同时， AngularJS 属性的值（learn）也将修改。
Validate User Input
还是这个ng-model指令，它可以对angular程序进行数据验证（number,e-mail,required）
<!DOCTYPE html>
<html>
<body>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email" >Not a valid e-mail address</span>
</form>
</body>
<script src="js/angular-1.3.0.js"></script>
</html>
Application Status
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
<!DOCTYPE html>
<html>
<body>
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>Edit the e-mail address, and try to change the status.</p>
<h1>Status</h1>
<p>Valid: {{myForm.myAddress.$valid}} (if true, the value meets all criteria).</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (if true, the value has been changed).</p>
<p>Touched: {{myForm.myAddress.$touched}} (if true, the field has been in focus).</p>
</form>
</body>
<script src="js/angular-1.3.0.js"></script>
</html>
vaild：验证值是否满足标准
dirty：验证值是否发生变化
touched：验证是否获取焦点
CSS Classes
这个就很好理解了，可以根据上面的状态来设置css样式，标识着发生变化。
<!DOCTYPE html>
<html>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>
<p>Edit the text field and it will get/lose classes according to the status.</p>
<p><b>Note:</b> A text field with the "required" attribute is not valid when it is empty.</p>
</body>
<script src="js/angular-1.3.0.js"></script>
</html>
Create New Directives
看了这么多的小例子，自己写一个怎么样。写之前，你要知道指令声明的几种方式：
| restrict | 意义 |
| E | Element name |
| A | Attribute |
| C | Class |
| M | Comment |
想着我说过的，替换，这样实现一个简单的html的嵌套，相当于在主视图声明一个变量，在js文件里面替换掉主视图的声明。
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
</head>
<body>
<hello></hello>
<div hello></div>
<div class="hello"></div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_Directive.js"></script>
</html>
JS文件：
var MyModule=angular.module("MyModule",[]);
MyModule.directive("hello", function () {
return {
restrict: 'ACME',
template: '<div>Hi everyone!</div>',
replace: true
}
});
Expand
给大家看一个综合的例子，里面用到了自定义指令，link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。还有ng-repeat来循环显示一个数组。
js文件：
var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
template : '<div ng-transclude></div>',
controller : function() {
var expanders = [];
this.gotOpened = function(selectedExpander) {
angular.forEach(expanders, function(expander) {
if (selectedExpander != expander) {
expander.showMe = false;
}
});
}
this.addExpander = function(expander) {
expanders.push(expander);
}
}
}
});
expModule.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
require : '^?accordion',
scope : {
title : '=expanderTitle'
},
template : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs, accordionController) {
scope.showMe = false;
accordionController.addExpander(scope);
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
accordionController.gotOpened(scope);
}
}
}
});
expModule.controller("SomeController",function($scope) {
$scope.expanders = [{
title : 'Click me to expand',
text : 'Hi there folks, I am the content that was hidden but is now shown.'
}, {
title : 'Click this',
text : 'I am even better text than you have seen previously'
}, {
title : 'Test',
text : 'test'
},{
title:'hello world',
text:'this is create by me'
}];
});
html文件：
<html ng-app="expanderModule">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/angular-1.3.0.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>
总结
1.指令是所有AngularJS应用最重要的部分，内置指令有63个。多多敲几个例子，你就会了解指令的概念了。
2.推荐大家去看看几个网站了解一下angularjs
http://www.w3schools.com/angular/default.asp