基础ng属性指令
ng-href
ng-src
ng-disabled
ng-checked
ng-readonly
ng-selected
ng-class
ng-style
布尔属性
根据HTML标准定义，布尔属性代表一个true或false值。当这个属性出现时，这个属性的值就是true（无论实际定义的值是什么）。如果未出现，这个属性值就是false。
当AngularJS中使用动态数据绑定是，不能简单地将这个属性设置为true或false，因为根据标准定义只有当这个属性不出现时，它的值才为false。因此AngularJS提供了一组带有ng-前缀的布尔属性，通过运算表达式的值来决定在目标元素上是插入还是移除对应的属性。
- ng-disabled
使用ng-disabled可以把disabled属性绑定到一下表单输入字段上：
- <input> （text、checkbox、radio、number、url、email、submit）;
- <textarea>;
- <select>;
- <button>
- ng-readonly
同其他布尔属性一样，HTML定义只会检查readonly属性是否出现，而不是它的实际值。
通过ng-readonly可以将某个返回真或假的表达式同是否出现readonly属性进行绑定
3.ng-checked
标准的checked属性是一个布尔属性，不需要进行赋值。通过ng-checked将某个表达式同是否出现checked属性进行绑定。
4.ng-selected
ng-selected可以对是否出现option标签的selected属性进行绑定
类布尔属性
ng-href、ng-src等属性虽然不是标准的HTML布尔属性，但是由于行为相似，所以在AngularJS源码内部是和布尔属性等对待的。
- ng-href
当使用当前作用域中的属性动态创建URL时，应该用ng-href代替href。
这里的潜在问题是当用户点击一个由插值动态生成的链接时，如果插值尚未生效，将会跳转到错误的页面（通常是404）。
2.ng-src
AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像
在指令中使用子作用域
继承的机制可以创建一个隔离层，用来将需要协同工作的方法和数据模型对象放置在一起。
ng-app和ng-controller是特殊的指令，因为它们会修改嵌套在它们内部的指令的作用域。
ng-app为Angluar应用创建$rootScope,ng-controller则会以$rootScope或另外一个ng-controller的作用域为原型创建新的子作用域。
1.任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。
$rootScope是作用域链的起始点，任何嵌套在ng-app内的指令都会继承它。
- ng-controller
内置指令ng-controller的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作和模型都定义在$rootScope上。用这个指令可以在一个DOM元素上放置控制器。
ng-controller接受一个参数expresson，这个参数是必须的。
expression参数是一个AngularJS表达式
子$scope只是一个JavaScript对象，其中含有从父级$scope中通过原型继承得到的方法和属性，包括应用的$rootScope。
嵌套在ng-controller中的指令有访问新子$scope的权限，但要牢记每个指令都应该遵守的和作用域相关的规则。
$scope对象的职责是承载DOM中指令所共享的操作和模型。
- 操作指的是$scope上的标准JavaScript方法
- 模型指的是$scope上保存的包含瞬时状态数据的JavaScript对象。持久化状态的数据应该保存到服务中，服务的作用是处理模型的持久化。
- 出于技术和架构方面的原因，绝对不要直接将控制器中的$scope赋值为基础类型的对象（字符串、布尔值或数字）。DOM中应该始终通过点操作符"."来访问数据。
遵循这个规则将使你远离不可预期的麻烦 - 控制器应该尽可能简单。虽然可以用控制器来组织所有功能，但是将业务逻辑移到服务和指令中是非常好的主意。
ng-include
使用ng-include可以加载,编译并包含外部HTML片段到当前的应用中.模板的URL被限制在于应用文档相同的域和协议下,可以通过白名单或包装成被信任的值来突破限制.更进一步,需要考虑跨域资源共享(Cross-Origin Resource Sharing, CORS)和同源规则(Same Origin Policy)来确保模板可以在任何浏览器中正常加载.
要记住,使用ng-include时AngularJS会自动创建一个子作用域.如果你想使用某个特定的作用域,例如ControllerA的作用域,必须在同一个DOM元素上添加ng-controller="ControllerA"指令,这样当模板加载完成后,不会像往常一样从外部作用域继承并创建一个新的 子作用域.ng-switch
这个指令和ng-switch-when即on="propertyName"一起使用,可以在perpertyName发生变化是渲染不同指令到视图中.ng-view
ng-view指令用来设置将被路由管理和放置在HTML中的视图的位置.ng-if
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素.如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除(被注释),否则对应元素的一个克隆将被重新插入DOM中(解除注释).
ng-if同ng-show和ng-hide指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点.
当一个元素被ng-if从DOM中移除,同它关联的作用域也会被销毁.而且当它重新加入DOM中时,会通过原型继承从它的父作用域生成一个新的作用域.ng-repeat
ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例.集合中的每个元素都会被赋予自己的模板和作用域.同时每个模板实例的作用域都会暴露一些特殊的属性.
- $index:遍历的进度(0-length-1).
- $first:当元素是遍历的第一个时值为true.
- $middle:当元素处于第一个和最后元素之间时值为true.
- $last:当元素是遍历的最后一个时值为true.
- $even:当$index值是偶数时值为true.
- $odd:当$index值为奇数时值为true.
- ng-init
ng-init指令用来在指令被调用时设置内部作用域的初始状态.
9.{{}}
{{}}语法是AngularJS内置的模板语法,它会在内部$scope和视图之间创建绑定.基于这个绑定,只要$scope发生变化,视图就会随之自动更新.
事实上它也是指令,是ng-bind的简略形式,这种形式不需要创建新的元素,因此它 常被用在行内文本中.
注意,屏幕可视的区域内使用{{}}会导致页面加载时未渲染的元素发生闪烁,用ng-bind可以避免这个问题
ng-bind
同{{}}
HTML加载含有{{}}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC).我们可以用ng-bind将内容同元素绑定在一起避免FOUC.内容会被当作子文本节点渲染到含有ng-bind指令的元素内.ng-cloak
除使用ng-bind来避免为渲染元素闪烁,还可以在含有{{}}的元素上使用ng-cloak指令
ng-cloak指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来.
12.ng-bind-template
同ng-bind指令类似,ng-bind-template用来在视图中绑定多个表达式.
13.ng-model
ng-model指令用来将input,select,textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它可以提过并处理表单验证功能,在元素上设置上设置相关的CSS类(ng-valid,ng-invalid),并负责在父表单中注册控件.
它将当前作用域中运算表达式的值同给定的元素进行绑定,如果属性并不存在,它会隐式创建并将其添加到当前作用域中.
我们应该始终用ng-model来绑定$scope上一个数据模型内的属性,而不是$scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖.
<input type="text" ng-model="modelName.someProperty"/>
- ng-show/ng-hide
ng-show和ng-hide根据所给的表达式的值来显示或隐藏HTML元素.当赋值给ng-show指令的值为false时元素会被隐藏.类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏.
15.ng-change
这个指令会在表单输入发生变化时计算给定表达式的值.因为要处理表单输入,这个指令要和ngModel联合使用.
16.ng-form
ng-form用来在一个表单内部嵌套另一个表单。普通的HTML<form>标签不允许嵌套，但ng-form可以
这意味内部所有的子表单都合法时，外部的表单才会合法。这对于用ng-repeat动态创建表单时非常有用的。
由于不能通过字符插值来给输入元素动态地生成name属性，所以需要将ng-form指令内每组重复的输入字段都包含在一个外部表单元素内。
下面的CSS类会根据表单的验证状态自动设置：
- 表单合法时设置ng-valid
- 表达不合法时设置ng-invalid
- 表单未进行修改时设置ng-pristion;
- 表单进行过修改时设置ng-dirty
Angular不会讲表单提交到服务器，除非它指定了action属性。要指定提交表单时调用哪个JavaScript方法，使用下面两个指令中的一个。
ng-submit:在表单元素上使用。
ng-click:在第一个按钮或submit类型（input[type=submit]）的输入字段上使用。
为了避免处理程序被多次调用，只使用下面两个指令中的一个。
下面的例子展示了如何通过服务器返回的JSON数据动态生成一个表单。我们用 ng-loop 来遍
历从服务器取回的所有数据。由于不能动态生成 name 属性，而我们又需要这个属性做验证，所以
在循环的过程中会为每一个字段都生成一个新表单。
由于AngularJS中用来取代 <form> 的 ng-form 指令可以嵌套，并且外部表单在所有子表单都合
法之前一直处于不合法状态，因此我们可以在动态生成子表单的同时使用表单验证功能。是的，
鱼和熊掌可以兼得。
下面先看一下我们硬编码的JSON数据，把它假设成是从服务器返回的：
angular.module('myApp',[])
.controller('FormController',function($scope) {
$scope.fields = [
{placeholder: 'Username', isRequired: true},
{placeholder: 'Password', isRequired: true},
{placeholder: 'Email (optional)', isRequired: false}
];
$scope.submitForm = function() {
alert("it works!");
};
});
下面用这些数据生成一个有验证功能的动态表单：
<form name="signup_form"
ng-controller="FormController"
ng-submit="submitForm()" novalidate>
<div ng-repeat="field in fields"
ng-form="signup_form_input">
<input type="text"
name="dynamic_input"
ng-required="field.isRequired"
ng-model="field.name"
placeholder="{{field.placeholder}}" />
<div
ng-show="signup_form_input.dynamic_input.$dirty &&
signup_form_input.dynamic_input.$invalid">
<span class="error"
ng-show="signup_form_input.dynamic_input.$error.required">
The field is required.
</span>
</div>
</div>
<button type="submit"
ng-disabled="signup_form.$invalid">
Submit All
</button>
</form>
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
ng-click
ng-click 用来指定一个元素被点击时调用的方法或表达式。ng-select
ng-select 用来将数据同HTML的 <select> 元素进行绑定。这个指令可以和 ng-model 以及
ng-options 指令一同使用，构建精细且表现优良的动态表单。
ng-options 的值可以是一个内涵表达式（comprehension expression），其实这只是一种有趣
的说法，简单来说就是它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给
select 标签内部的选项。它可以是下面两种形式。
- 数组作为数据源：
- 用数组中的值做标签；
- 用数组中的值作为选中的标签；
- 用数组中的值做标签组；
- 用数组中的值作为选中的标签组。
- 对象作为数据源：
- 用对象的键-值（key-value）做标签；
- 用对象的键-值作为选中的标签；
- 用对象的键-值作为标签组；
- 用对象的键-值作为选中的标签组。
ng-submit
ng-submit 用来将表达式同 onsubmit 事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面），除非表单不含有 action 属性。ng-class
使用 ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。ng-attr-(suffix)
当AngularJS编译DOM时会查找花括号 {{ some expression }} 内的表达式。这些表达式会
被自动注册到 $watch 服务中并更新到 $digest 循环中，成为它的一部分：
<-- updated when`someExpression` on the$scope
is updated -->
<h1>Hello{{someExpression}}</h1>
有时浏览器会对属性会进行很苛刻的限制。SVG就是一个例子：
<svg>
<circle cx="{{ cx }}"></circle>
</svg>
运行上面的代码会抛出一个错误，指出我们有一个非法属性。可以用 ng-attr-cx 来解决这
个问题。注意， cx 位于这个名称的尾部。在这个属性中，通过用 {{ }} 来写表达式，达到前面提
到的目的。
<svg>
<circle ng-attr-cx="{{ cx }}"><circle>
</svg>
