ng-disabled

ng-disabled 可以把 disabled 属性绑定到以下表单输入字段上：
<input> （ text 、 checkbox 、 radio 、 number 、 url, email 、 submit ）；
<textarea> ；
<select> ；
<button>

 ng-readonly

  ng-checked

<label>someProperty = {{someProperty}}</label>
<input type="checkbox"
ng-checked="someProperty"
ng-init="someProperty = true"
ng-model="someProperty">

 ng-selected

<label>Select Two Fish:</label>
<input type="checkbox"
ng-model="isTwoFish"><br/>
<select>
<option>One Fish</option>
<option ng-selected="isTwoFish">Two Fish</option>
</select>

 

当使用当前作用域中的属性动态创建 URL 时，应该用 ng-href 代替 href 

当用户点击一个由插值动态生成的链接时，如果插值尚未生效，将会跳转到错误的页面（通常是 404 ）。
如果使用 ng-href ， AngularJS 会等到插值生效后再执行点击链接的行为

 

当动态生成src时AngularJS 会告诉浏览器在 ng-src 对应的表达式生效之前不要加载图像

 

在指令中使用子作用域

ng-app 和 ng-controller 是特殊的指令，因为它们会修改嵌套在它们内部的指令的作用域

ng-app 为 AngularJS 应用创建 $rootScope ， ng-controller 则会以 $rootScope 或另外一个 ng-controller 的作用域为原型创建新的
子作用域。

 

ng-app
任何具有 ng-app 属性的 DOM 元素将被标记为 $rootScope 的起始点。
$rootScope 是作用域链的起始点，任何嵌套在 ng-app 内的指令都会继承它。

 

ng-controller

内置指令 ng-controller 的作用是为嵌套在其中的指令创建一个子作用域，避免将所有 操作和 模型都定义在 $rootScope 上。

子 $scope 只是一个 JavaScript 对象，其中含有从父级 $scope 中通过原型继承得到的方法和属性，包括应用的 $rootScope 

 

 ng-include

使用 ng-include 可以加载、编译并包含外部 HTML 片段到当前的应用中

使用 src 属性来指定要包含的模板路径。注意，如果要指定一个固定的路径，那么要在属性中使用 单引号包含它这并不显眼，但是如果你遗漏了它可能会引起很多麻烦。

<div ng-include="'/myTemplateName.html'"
ng-controller="MyController"
ng-init="name = 'World'">
Hello {{ name }}
</div>

ng-switch
这个指令和 ng-switch-when 及 on="propertyName" 一起使用，可以在 propertyName 发生变化时渲染不同指令到视图中。在下面的例
子中，当 person.name 是 Ari 时，文本域下面的 div 会显示出来，并且这个人会获得胜利：
<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>
注意，在 switch 被调用之前我们用 ng-switch-default 来输出默认值。

 

ng-view

ng-view 指令用来设置将被路由管理和放置在 HTML 中的视图的位置

 

 ng-if 

使用 ng-if 指令可以完全根据表达式的值在 DOM 中生成或移除一个元素。如果赋值给 ng-if 的表达式的值是 false ，那对应的元素将会从
DOM 中移除，否则对应元素的一个 克隆将被重新插入 DOM 中。
ng-if 同 no-show 和 ng-hide 指令最本质的区别是，它不是通过 CSS 显示或隐藏 DOM 节点，而是真正生成或移除节点。
当一个元素被 ng-if 从 DOM 中移除，同它关联的作用域也会被销毁。而且当它重新加入 DOM 中时，会通过原型继承从它的父作用域生成一个
新的作用域。
同时有一个重要的细节需要知道， ngIf 重新创建元素时用的是它们编译后的状态。如果 ng-if 内部的代码加载之后被 jQuery 修改过（例如
用 .addClass ），那么当 ng-if 的表达式值为 false 时，这个 DOM 元素会被移除，表达式再次成为 true 时这个元素及其内部的子元素会被
重新插入 DOM ，此时这些元素的状态会是它们的原始状态，而不是它们上次被移除时的状态。也就是说无论用 jQuery 的 .addClass 添加了什
么类都不会存在了。
<div ng-if="2+2===5">
Won't see this DOM node, not even in the source code
</div>

 

 ng-repeat

ng-repeat 用来遍历一个集合或为集合中的每个元素生成一个模板实例

$index ：遍历的进度（ 0...length-1 ）。
$first ：当元素是遍历的第一个时值为 true 。
$middle ：当元素处于第一个和最后元素之间时值为 true 。
$last ：当元素是遍历的最后一个时值为 true 。
$even ：当 $index 值是偶数时值为 true 。
$odd ：当 $index 值是奇数时值为 true

<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
{{person.name}} lives in {{person.city}}
</li>

ng-init
ng-init 指令用来在指令被调用时设置内部作用域的初始状态

<div ng-init="greeting='Hello';person='World'">
{{greeting}} {{person}}
</div>

  {{ }}

{{ }} 语法是 AngularJS 内置的模板语法，它会在内部 $scope 和视图之间创建绑定。基于这个绑定，只要 $scope 发生变化，视图就会随之自
动更新。

实际上它是 ng-bind 的简略形式，用这种形式不需要创建新的元素，因此它常被用在行内文本中。注意，在屏幕可视的区域内使用 {{ }} 会导致页面加载时未渲染的元素发生闪烁，用 ng-bind 可以避免这个问题。

 

 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}}">

ng-model
ng-model 指令用来将 input 、 select 、 text area 或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验
证功能，在元素上设置相关的 CSS 类（ ng-valid 、 ng-invalid 等），并负责在父表单中注册控件。
它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性并不存在，它会隐式创建并将其添加到当前作用域中。

ng-model-options
ngModelOptions 允许你调整 ng-model 如何完成更新操作。
ngModelOptions 中两个最有用的选项是 updateOn 和 debounce 。

<input type="text" ng-model="user.name" ng-model-options="{updateOn: 'blur'}"/>
Hello {{user.name}}
在这个例子中，直到 input 标签上的 blur 事件触发之前 user.name 都不会更新（也就是说，当 input 失去焦点时更新）

debounce 用于指定一个时间值，以毫秒为单位，它表示触发更新前等待的时间，例如：
<input type="text" ng-model="user.name" ng-model-options="{debounce: 1000}"/>
Hello {{user.name}}

ng-show/ng-hide
ng-show 和 ng-hide 根据所给表达式的值来显示或隐藏 HTML 元素

<div ng-show="2 + 2 == 5">
2 + 2 isn't 5, don't show
</div>

ng-change
这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要和 ngModel 联合起来使用。
<div ng-controller="EquationController">
<input type="text"
ng-model="equation.x"
ng-change="change()" />
<code>{{ equation.output }}</code>
</div>
angular.module('myApp',[])
.controller('EquationController',function($scope) {
$scope.equation = {};
$scope.change = function() {
$scope.equation.output
= parseInt($scope.equation.x) + 2;
};
});

 

ng-form
ng-form 用来在一个表单内部嵌套另一个表单。普通的 HTML <form> 标签不允许嵌套，但 ng-form 可以。
这意味着内部所有的子表单都合法时，外部的表单才会合法。这对于用 ng-repeat 动态创建表单是非常有用的。

Angular 不会将表单提交到服务器，除非它指定了 action 属性。
要指定提交表单时调用哪个 JavaScript 方法，使用下面两个指令中的一个。
ng-submit ：在表单元素上使用。
ng-click ：在第一个按钮或 submit 类型（ input[type=submit] ）的输入字段上使用。
为了避免处理程序被多次调用，只使用上面两个指令中的一个。

 

ng-click
ng-click 用来指定一个元素被点击时调用的方法或表达式。

 

ng-select
ng-select 用来将数据同 HTML 的 <select> 元素进行绑定。这个指令可以和 ng-model 以及 ng-options 指令一同使用，构建精细且表现
优良的动态表单。

ng-options 的值可以是一个 内涵表达式（ comprehension expression ），其实这只是一种有趣的说法，简单来说就是它可以接受一个数组或
对象，并对它们进行循环，将内部的内容提供给 select 标签内部的选项。它可以是下面两种形式。
数组作为数据源：
用数组中的值做标签；
用数组中的值作为选中的标签；
用数组中的值做标签组；
用数组中的值作为选中的标签组。
对象作为数据源：
用对象的键 - 值（ key-value ）做标签；
用对象的键 - 值作为选中的标签；
用对象的键 - 值作为标签组；
用对象的键 - 值作为选中的标签组。

<div ng-controller="CityController">
<select ng-model="city"
ng-options="city.name for city in cities">
<option value="">Choose City</option>
</select>
Best City: {{ city.name }}
</div>
angular.module('myApp',[])
.controller('CityController',function($scope) {
$scope.cities = [
{name: 'Seattle'},
{name: 'San Francisco'},
{name: 'Chicago'},
{name: 'New York'},
{name: 'Boston'}
];
});

 

ng-submit
ng-submit 用来将表达式同 onsubmit 事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面）， 除非表单不含
有 action 属性。

 

ng-class
使用 ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类
会被移除，新类会被添加

ng-controller="LotteryController">
<div ng-class="{red: x > 5}"
> You won!
</div>

 

 ng-attr-(suffix)

<svg>
<circle ng-attr-cx="{{ cx }}"><circle>
</svg>

 

compile （对象或函数）

compile 选项本身并不会被频繁使用，但是 link 函数则会被经常使用。本质上，当我们设置了 link 选项，实际上是创建了一
个 postLink() 链接函数，以便 compile() 函数可以定义链接函数。

compile 和 link 选项是互斥的。如果同时设置了这两个选项，那么会把 compile 所返回的函数当作链接函数，而 link 选项
本身则会被忽略。

链接
用 link 函数创建可以操作 DOM 的指令

下面两种定义指令的方式在功能上是完全一样的：
angular.module('myApp', [])
.directive('myDirective', function() {
return {
pre: function(tElement, tAttrs, transclude) {
// 在子元素被连接前执行
// 在 `link` 函数前进行 DOM 操作不安全
// 因为连接函数有可能找不到需要操作的元素
},
post: function(scope, iElement, iAttrs, controller) {
// 在子元素被连接后执行
// 如果没有使用编译选项，在这里操作 DOM 与在连接函数中操作同样安全
}
};
});
angular.module('myApp', [])
.directive('myDirective', function() {
return {
link: function(scope, ele, attrs) {
return {
// 在子元素被连接前执行
// 在 `link` 函数前进行 DOM 操作不安全
// 因为连接函数有可能找不到需要操作的元素
},
post: function(scope, iElement, iAttrs, controller) {
// 在子元素被连接后执行
// 如果没有使用编译选项，在这里操作 DOM 与在连接函数中操作同样安全
}
}
};
})

如果指令定义中有 require 选项，函数签名中会有第四个参数，代表控制器或者所依赖的指令的控制器。
// require 'SomeController',
link: function(scope, element, attrs, SomeController) {
// 在这里操作 DOM ，并且可以访问依赖指令的控制器
}

scope
指令用来在其内部注册监听器的作用域。
iElement
iElement 参数代表实例元素，指使用此指令的元素。在 postLink 函数中我们应该只操作此元素的子元素，因为子元素已经被链接过了。
iAttrs
iAttrs 参数代表 实例属性，是一个由定义在元素上的属性组成的标准化列表，可以在所有指令的链接函数间共享。会以 JavaScript 对象的形
式进行传递。
controller
controller 参数指向 require 选项定义的控制器。如果没有设置 require 选项，那么 controller 参数的值为 undefined 。
控制器在所有的指令间共享，因此指令可以将控制器当作通信通道（公共 API ）。如果设置了多个 require ，那么这个参数会是一个由控制器
实例组成的数组，而不只是一个单独的控制器。

 

ngModel
ngModel 是一个用法特殊的指令，它提供更底层的 API 来处理控制器内的数据。当我们在指令中使用 ngModel 时能够访问一个特殊的 API ，这
个 API 用来处理数据绑定、验证、 CSS 更新等不实际操作 DOM 的事情。

ngModel 控制器会随 ngModel 被一直注入到指令中，其中包含了一些方法。为了访问 ngModelController 必须使用 require 设置（像前
面的例子中那样）

为了设置作用域中的视图值，需要调用 ngModel.$setViewValue() 函数。 ngModel.$setViewValue() 函数可以接受一个参数。
value （字符串）： value 参数是我们想要赋值给 ngModel 实例的实际值。这个方法会更新控制器上本地的 $viewValue ，然后将值传递给
每一个 $parser 函数（包括验证器）。
当值被解析，且 $parser 流水线中所有的函数都调用完成后，值会被赋给 $modelValue 属性，并且传递给指令中 ng-model 属性提供的表达
式。
最后，所有步骤都完成后， $viewChangeListeners 中所有的监听器都会被调用。

：
angular.module('myApp')
.directive('myDirective',function(){
return {
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
// 现在我们在指令中持有一个 ngModelController 实例

$(function() {
ele.datepicker({
onSelect: function(date) {
// 设置视图并调用 apply
scope.$apply(function() {
ngModel.$setViewValue(date);
});
}
});
});


}
};
});
如果不设置 require 选项， ngModelController 就不会被注入到指令中