指令：Directive
angularJS 有一套完整的，可拓展的，用来帮助web应用开发的指令集；
在建立DOM期间，和HTML关联着的指令会被检测到，并被执行；
在angularJS中将前缀为 ng- 这种属性称之为指令，其作用就是为DOM元素调用方法，定义行为绑定数据等；
简单说：当一个angular 应用启动时，angular会遍历DOM树来解析HTML，根据指令不同，完成不同的操作；
指令属性小提示：
ng-xxx 的属性并不是标准中定义的属性，很多情况下语法校验是无法通过的；
HTML5允许拓展（自制的）的属性，以data- 开头；
在angularJS中可以使用 data-ng- 来让网页对HTML有效（两者效果都是一样的）
<hrml ng-app> <hrml data-ng-app>
ng-app指令：
ng-app 指令用来表明一个 angularJS 应用程序；
标记在一个 angularJS 的作用范围在根对象上；
系统执行的时候会自动的执行根对象范围内的指令；
可以在一个页面创建多个 ng-app 节点（不推荐），原因：创建多个 ng-app 时，默认只能执行第一个，后面的需要进行手动引导：angular.bootstrap()
标记的范围尽可能小，性能优化
多个 ng-app 的使用：
<div ng-app="myAppOne" ng-controller="myAppOneController"> <input type="button" value="按钮一" ng-click="show()"> </div> <div ng-app="myAppTwo" ng-controller="myAppTwoController"> <input type="button" value="按钮二" ng-click="show()"> </div> </body> <script type='text/javascript' src='bower_components/angular/angular.js'></script> <script type="text/javascript"> var myAppOne = angular.module('myAppOne',[]); myAppOne.controller('myAppOneController',['$scope',function($scope){ $scope.show = function(){console.log('1');}; }]); var myAppTwo = angular.module('myAppTwo',[]); myAppTwo.controller('myAppTwoController',['$scope',function($scope){ $scope.show = function(){console.log('2');}; }]); //手动引导让第二个div被myAppTwo管理 angular.bootstrap(document.querySelector('[ng-app="myAppTwo"]'),['myAppTwo']); //上面这种方法，可以解决，但是angularJS不推荐，推荐使用的是： //创建一个新模块，去管理其他的模块 接下来将ng-app="myApp" angular.module('myApp',['myAppOne'],['myAppTwo']); </script>
ng-bind指令：
作用：将作用域（scope）中的值绑定到元素的 innerHTMl 中，其效果会比通过表达式绑定的方式会更加友好：
如果绑定的内容有HTML，就会自动转义：
<div ng-app ng-init="dataName='张三'"> <h1 ng-bind="dataName"></h1> </div>
如果要绑定HTMl，需要引入 angular-sanitize 这个包：
即使引入这个包，还是会有有问题：
<div ng-app ng-init="dataName='<span>love</span>'"> <h1 ng-bind-html="dataName"></h1> </div> </body> <script type='text/javascript' src='bower_components/angular/angular.js'></script> <script type="text/javascript" src="bower_components/angular/angular-sanitize.js"></script>
ng-cloak指令：
ng-cloak指令用于在AngularJS 应用在加载时防止angularJS代码未加载玩而出现的问题；
angularJS应用在加载时，文档可能会由于angularJS代码未加载完而出现显示angularJS代码，进而会有闪烁的效果，ng-clock指令就是为了阻止该问题的发生
闪一下的问题，除了可以用ng-bind，但是这个属性，比较适用于一两个元素，如果元素比较多的情况就可以是以使用ng-cloak：
执行机制：当angular在执行的过程中，会在这个元素上默认保持不动，angular在执行完之后，会自动移除这个属性；
ng-show / ng-hide 指令：
ng-show / ng-hide指令会根据属性值去确定是否展示当前元素，例如：ng-show=false则会不会显示该元素
使用这个做一个遮罩层的显示隐藏：
<style type="text/css"> div.shadow{background-color: rgba(0,0,0,0.5); position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;} </style> <div class="shadow" ng-app="myApp" ng-show="loading" ng-controller="myAppController"></div> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller('myAppController',['$scope','$timeout',function($scope,$timeout){ $scope.loading = true; $timeout(function(){ $scope.loading = false; },3000); }]); </script>
ng-if指令：
决定一个元素是否存在；ng-if = "true/false";
ng-href / ng-src 指令：
ng-href / ng-src 指令用于解决当链接类型的数据绑定造成的加载BUG，如：
<!-- 浏览器在解析HTML时会请求{{item.url}} --> <img src="{{item.url}}"> <!-- 可以使用ng-src解决问题 --> <img ng-src="{{item.url}}">
ng-switch指令：
ng-switch指令根据表达式显示或隐藏对应的部分。
对应的子元素使用 ng-switch-when 指令，如果匹配选择显示，其他未匹配的则会被移除；
你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示；
ng-switch指令的效果：
ng-switch需要配合 ng-switch-when和ng-switch-default来使用：
<div ng-app> <select ng-model="myVar"> <option value='jd'>www.jd.com</option> <option value='taobao'>www.taobao.com</option> <option value='baidu'>www.baidu.com</option> </select> <div ng-switch="myVar"> <div ng-switch-when="jd">www.jd.com</div> <div ng-switch-when="taobao">www.taobao.com</div> <div ng-switch-when="baidu">www.baidu.com</div> <div ng-switch-default="baidu">请选择</div> </div> </div>
其他常用指令：
ng-cheched : 单选 / 复选是否被选中；
ng-disabled : 是否禁用；
ng-readonly : 是否只读；
ng-selected : 是否选中；
<div ng-app> <!-- 都不选中 --> <input type="checkbox" ng-model="true"> <input type="checkbox" ng-checked="true"> </div>
实现全选和全不选：
<div ng-app> <p><input type="checkbox" ng-model="checked">全选或者全不选</p> <li>选项0<input type="checkbox" ng-checked="checked"></li> <li>选项0<input type="checkbox" ng-checked="checked"></li> <li>选项0<input type="checkbox" ng-checked="checked"></li> <li>选项0<input type="checkbox" ng-checked="checked"></li> <li>选项0<input type="checkbox" ng-checked="checked"></li> <li>选项0<input type="checkbox" ng-checked="checked"></li> </div>
常用的事件指令：
ng-blur : 失去焦点；
ng-change : 发生改变；
ng-copy : 拷贝完成；
ng-click : 单击；
ng-dbclick : 双击；
ng-focus : 获得焦点；
ng-submit : 表单提交；
angularJS 的指令系统中还有一块是：自定义指令；（稍微麻烦，在此不做赘述）