angularJS 指令系统
指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径。
在HTML中要用内置指令ng-app标记出应用的根节点，这个指令需要以属性的形式来使用，因此可以将它写到任何位置，但是写到<html>的开始标签上是最常规的做法：
所有内置指令的命名空间都使用ng作为前缀。为了防止命名空间冲突，不要在自定义指令前加ng前缀
来创建一个自定义指令
<my-directive></my-directive>
angular.module('myApp',[])
.directive('myDirective', function() {
return {
restrict: 'E',
template: '<a href="http://google.com">Click me to go to Google</a>'
};
});
运行时，界面中 Click me to go to Google 就代替了<my-directive></my-directive> 标签
通过AngularJS模块中的.directive()方法，通过传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字，指令名应该是驼峰命名风格的，函数返回一个对象
directive()方法返回的对象中包含了用来定义和配置指令所需的方法和属性。
内置指令：
基础 ng 属性指令：
ng-href； ng-src；
// 当 href 包含一个 {{expression}}时总是使用 ng-href <a ng-href="{{ myHref }}">I'm feeling lucky, when I load</a> <img ng-src="{{imgSrc}}"/>
布尔属性：
ng-disabled； ng-checked； ng-readonly；
例子：
//当输入框没有输入时，write是null,那么！write是true，此时按钮不能点击，输入后，!write就是false，可以点击 <input type="text" ng-model="write" placeholder="请输入"> <button ng-disabled="!write">提交</button>
check和 readonly 同理。
ng-selected；
//check和select 进行绑定 <input type="checkbox" ng-model="isTwoFish"><br/> <select> <option>One Fish</option> <option ng-selected="isTwoFish">Two Fish</option> <option >222o Fish</option> </select>
ng-repeat
ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。
$index：遍历的进度（0...length-1）。
$first：当元素是遍历的第一个时值为true。
$middle：当元素处于第一个和最后元素之间时值为true。
$last：当元素是遍历的最后一个时值为true。
$even：当$index值是偶数时值为true。
$odd：当$index值是奇数时值为true。
下面的例子展示了如何用$odd和$even来制作一个红蓝相间的列表。 JavaScript中数组
的索引从0开始，因此我们用!$even和!$odd来将$even和$odd的布尔值反转。
<ul ng-controller="PeopleController">
<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
{{person.name}} lives in {{person.city}}
</li>
</ul>
.odd {
}
.even {
}
angular.module('myApp',[])
.controller('PeopleController',function($scope) {
$scope.people = [
{name: "Ari", city: "San Francisco"},
{name: "Erik", city: "Seattle"}];
});
ng-init ng-init指令用来在指令被调用时设置内部作用域的初始状态。
{{ }}
<div>{{name}}</div>
{{ }}语法是AngularJS内置的模板语法，它会在内部$scope和视图之间创建绑定。基于这个绑定，只要$scope发生变化，视图就会随之自动更新。
事实上它也是指令，虽然看起来并不像，实际上它是ng-bind的简略形式，用这种形式不需要创建新的元素，因此它常被用在行内文本中。
注意，在屏幕可视的区域内使用{{ }}会导致页面加载时未渲染的元素发生闪烁，用ng-bind可以避免这个问题。
<body ng-init="greeting='HelloWorld'">
{{ greeting }}
</body>
ng-bind
<body ng-init="greeting='HelloWorld'">
<p ng-bind="greeting"></p>
</body>
ng-cloak
除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak指令：
<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body>
ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。
ng-bind-template
同ng-bind指令类似， ng-bind-template用来在视图中绑定多个表达式。
<div
ng-bind-template="{{message}}{{name}}">
</div>
ng-model
ng-model指令用来将input、 select、 text area或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验证功能，在元素上设置相关的CSS类（ng-valid、ng-invalid等），并负责在父表单中注册控件。
它将当前作用域中运算表达式的值同 给定的元素进行绑定。如果属性并不存在，它会隐式创建并将其添加到当前作用域中。
我们应该始终用ngModel来绑定$scope上一个数据模型内的属性，而不是$scope上的属性，这可以避免在作用域或后代作用域中发生属性覆盖。 例如：
<input type="text" ng-model="modelName.someProperty" /> $scope.modelName = { someProperty:...}
ng-show/ng-hide
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。类似地，当赋值给ng-hide指令的值为true时元素也会被隐藏。
<div ng-show="2 + 2 == 5"> 2 + 2 isn't 5, don't show </div> <div ng-show="2 + 2 == 4"> 2 + 2 is 4, do show </div> <div ng-hide="2 + 2 == 5"> 2 + 2 isn't 5, don't hide </div> <div ng-hide="2 + 2 == 4"> 2 + 2 is 4, do hide </div>
ng-if
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中
ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。
15. ng-change
这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要和ngModel联合起来使用
<div ng-controller="EquationController">
<input type="text" ng-model="equation.x" ng-change="change()" />
<code>{{ equation.output }}</code>
</div>
var app = angular.module("app",[]);
app.controller('EquationController',function($scope) {
$scope.equation = {};
$scope.change = function() {
$scope.equation.output= parseInt($scope.equation.x) + 2;
};
});
只要文本输入字段中的内容发生了变化就会改变equation.x的值，进而运行change()函数。
16. ng-form
ng-form用来在一个表单内部嵌套另一个表单。普通的HTML <form>标签不允许嵌套，但
ng-form可以。
这意味着内部所有的子表单都合法时，外部的表单才会合法。
表单合法时设置ng-valid；
表单不合法时设置ng-invlid；
表单未进行修改时设置ng-pristion；
表单进行过修改时设置ng-dirty。
Angular不会将表单提交到服务器，除非它指定了action属性。要指定提交表单时调用哪个
JavaScript方法，使用下面两个指令中的一个。
ng-submit：在表单元素上使用。
ng-click：在第一个按钮或submit类型（input[type=submit]）的输入字段上使用。
18. ng-select
ng-select用来将数据同HTML的<select>元素进行绑定。这个指令可以和ng-model以及
ng-options指令一同使用，构建精细且表现优良的动态表单。
ng-options的值可以是下面两种形式。
数组作为数据源：
用数组中的值做标签；
用数组中的值作为选中的标签；
用数组中的值做标签组；
用数组中的值作为选中的标签组。
对象作为数据源：
用对象的键值（key-value）做标签；
用对象的键值作为选中的标签；
用对象的键值作为标签组；
用对象的键值作为选中的标签组。
下面看一个ng-select指令的实例
<div ng-controller="citySelection"> <select ng-model="city" ng-options="city.name for city in cities"> <option value="">请选择</option> </select> Best City: {{ city.name }} </div> app.controller('citySelection',function($scope) { $scope.cities = [ {name:"北京"}, {name:"上海"}, {name:"广州"}, {name:"深圳"} ] });
ng-submit
ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面）， 除非表单不含有action属性。
<form ng-submit="submit()" ng-controller="FormController"> Enter text and hit enter: <input type="text" ng-model="person.name" name="person.name" /> <input type="submit" name="person.name" value="Submit" /> <code>people={{people}}</code> <ul ng-repeat="(index, object) in people"> <li>{{ object.name }}</li> </ul> </form> app.controller('FormController',function($scope) { $scope.person = {name:null}; $scope.people = []; $scope.submit = function(){ if($scope.person.name){ $scope.people.push({name:$scope.person.name}); $scope.person.name = ''; } } });
ng-class
使用ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加
下面的例子会用ng-class在一个随机数大于5时将.red类添加到一个div上：
<div ng-controller="LotteryController"> <div ng-class="{red: x > 5}" ng-if="x > 5"> You won! </div> <button ng-click="x = generateNumber()" ng-init="x = 0">Draw Number</button> <p>Number is: {{ x }}</p> </div> //如果x的值大于5，那么 div回事用red的样式， 如果x的值小于5 ， 那么就是默认的样式
app.controller('LotteryController',function($scope) { $scope.generateNumber = function(){ return Math.random()*10+1; } });
