Angularjs学习(5)之指令

自定义 HTML 元素和属性

基于我们对HTML元素的理解，指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径。
接下来让我们来创建一个自定义指令：

<my-directive></my-directive>

对应js代码如下

angular.module('myApp',[]).directive('myDirective', function() {
	return {
		restrict: 'E',
		template: '<a href="http://google.com">Click me to go to Google</a>'
	};
});

向指令中传递数据

这里的话一般都用ng-model进行双向绑定来向指令中传递数据，下面看一个Demo
JS Bin on jsbin.com

内置指令

AngularJS提供了一系列内置指令。其中一些指令重载了原生的HTML元素，比如form和a标签，当在HTML中使用标签时，并不一定能明确看出是否在使用指令，其他内置指令通常以ng为前缀，很容易识别。下面介绍几个基础ng属性指令。

• 布尔属性

属性	用法
ng-disabled	当写普通的HTML输入字段时，如果在元素标签上出现了disabled属性就会禁用这个输入字段。通过ng-disabled可以对是否出现属性进行绑定。在线示例： http://jsbin.com/iHiYItu/1/edit
ng-readonly	同其他布尔属性一样， HTML定义只会检查readonly属性是否出现，而不是它的实际值
ng-checked	通过ng-checked将某个表达式同是否出现checked属性进行绑定。
ng-selected	ng-selected可以对是否出现option标签的selected属性进行绑定, 在线示例： http://jsbin.com/oQazOQE/2/edit

• 类布尔属性

属性	用法
ng-href	当使用当前作用域中的属性动态创建URL时，应该用ng-href代替href,在线示例： http://jsbin.com/IgInopi/1/edit
ng-src	AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像 ,在线示例： http://jsbin.com/egucIqU/1/edit。 浏览在线示例时，通过Chrome开发者工具的网络面板观察资源加载状况，注意，其中一个请求是红色的，说明发生了错误。这个错误是由于Wrong Way中我们用src代替了ng-src导致的。

• 在指令中使用子作用域

属性	用法
ng-app	任何具有ng-app属性的DOM元素将被标记为rootScope的起始点。rootScope是作用域链的起始点，任何嵌套在ng-app内的指令都会继承它，在线示例： http://jsbin.com/ICOzeFI/2/edit。 实际生产中不建议像使用全局作用域一样使用$rootScope
ng-controller	内置指令ng-controller的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作和模型都定义在rootScope上。用这个指令可以在一个DOM元素上放置控制器，ng-controller接受一个参数expression，这个参数是必需的，expression参数是一个AngularJS表达式。嵌套在ng-controller中的指令有访问新子scope的权限，但是要牢记每个指令都应该遵守的和作用域相关的规则，在线示例： http://jsbin.com/OYikipe/1/edit， http://jsbin.com/UbIRIHa/1/
ng-include	使用ng-include可以加载、编译并包含外部HTML片段到当前的应用中。使用ng-include时AngularJS会自动创建一个子作用域。如果你想使用某个特定的作用域，例如ControllerA的作用域，必须在同一个DOM元素上添加ng-controller =”ControllerA”指令，这样当模板加载完成后，不会像往常一样从外部作用域继承并创建一个新的子作用域
ng-switch	这个指令和ng-switch-when及on=”propertyName”一起使用，可以propertyName发生变化时渲染不同指令到视图中,在线示例： http://jsbin.com/AVihUdi/2/。
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中时，会通过原型继承从它的父作用域生成一个新的作用域。
ng-repeat	ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性,在线示例： http://jsbin.com/akuYUkey/1/edit。
ng-init	ng-init指令用来在指令被调用时设置内部作用域的初始状态, ng-init最常见的使用场景是需要创建小的示例代码的时候,在线示例： http://jsbin.com/OZENuhO/1/。
{{ }}	{{ }}语法是AngularJS内置的模板语法，它会在内部scope和视图之间创建绑定。基于这个绑定，只要scope发生变化，视图就会随之自动更新。在屏幕可视的区域内使用{{ }}会导致页面加载时未渲染的元素发生闪烁，用ng-bind可以避免这个问题,在线示例： http://jsbin.com/ODUxeho/1/edit。
ng-bind	尽管可以在视图中使用{{ }}模板语法，我们也可以通过ng-bind指令实现同样的行为,在线示例： http://jsbin.com/esihUJ/1/edit
ng-cloak	除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak指令,在线示例： http://jsbin.com/AJEboLO/1/edit。
ng-bind-template	同ng-bind指令类似， ng-bind-template用来在视图中绑定多个表达式。
ng-model	ng-model指令用来将input、 select、 text area或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验证功能，在元素上设置相关的CSS类（ng-valid、ng-invalid等），并负责在父表单中注册控件。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性并不存在，它会隐式创建并将其添加到当前作用域中。我们应该始终用ngModel来绑定scope上一个数据模型内的属性，而不是scope上的属性，这可以避免在作用域或后代作用域中发生属性覆盖
ng-show/ng-hide	ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。类似地，当赋值给ng-hide指令的值为true时元素也会被隐藏。元素的显示或隐藏是通过移除或添加ng-hide这个CSS类来实现的,在线示例： http://jsbin.com/ihOkagE/1/。
ng-change	这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要和ngModel联合起来使用,在线示例： http://jsbin.com/onUXuxO/1/edit。
ng-form	ng-form用来在一个表单内部嵌套另一个表单。普通的form标签不允许嵌套，但ng-form可以。这意味着内部所有的子表单都合法时，外部的表单才会合法。这对于用ng-repeat动态创建表单是非常有用的,在线示例： http://jsbin.com/UduNeCA/1/edit。
ng-click	ng-click用来指定一个元素被点击时调用的方法或表达式,在线示例： http://jsbin.com/uGipUBU/2/edit
ng-select	ng-select用来将数据同HTML的select元素进行绑定。这个指令可以和ng-model以及ng-options指令一同使用，构建精细且表现优良的动态表单。ng-options的值可以是一个内涵表达式（comprehension expression），其实这只是一种有趣的说法，简单来说就是它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项,在线示例： http://jsbin.com/iQelOxi/1/edit。
ng-submit	ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面）， 除非表单不含有action属性,在线示例： http://jsbin.com/ONIcAC/1/edit。
ng-class	使用ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加,在线示例： http://jsbin.com/IvEcUci/1/edit。