指令：Directive  

angularJS 有一套完整的，可拓展的，用来帮助web应用开发的指令集；

在建立DOM期间，和HTML关联着的指令会被检测到，并被执行；

在angularJS中将前缀为 ng- 这种属性称之为指令，其作用就是为DOM元素调用方法，定义行为绑定数据等；

简单说：当一个angular 应用启动时，angular会遍历DOM树来解析HTML，根据指令不同，完成不同的操作；

指令属性小提示：

ng-xxx 的属性并不是标准中定义的属性，很多情况下语法校验是无法通过的；

HTML5允许拓展（自制的）的属性，以data- 开头；

在angularJS中可以使用 data-ng- 来让网页对HTML有效（两者效果都是一样的）

 ng-app指令：

ng-app 指令用来表明一个 angularJS 应用程序；

标记在一个 angularJS 的作用范围在根对象上；

系统执行的时候会自动的执行根对象范围内的指令；

可以在一个页面创建多个 ng-app 节点（不推荐），原因：创建多个 ng-app 时，默认只能执行第一个，后面的需要进行手动引导：angular.bootstrap()

标记的范围尽可能小，性能优化

 多个 ng-app 的使用： 

 

ng-bind指令：

作用：将作用域（scope）中的值绑定到元素的 innerHTMl 中，其效果会比通过表达式绑定的方式会更加友好：

如果绑定的内容有HTML，就会自动转义：

如果要绑定HTMl，需要引入 angular-sanitize 这个包：

即使引入这个包，还是会有有问题：

原因：

引进了的文件，如果想要用它提供的模块，就必须让我们的模块去依赖它里面的模块，才能使用它的模块；

如果直接写ng-app，是直接使用angularjs提供的一个默认的模块，这个模块是没有去依赖这个东西的，所以不会生效；

这样就可以生效：

 

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则会不会显示该元素

使用这个做一个遮罩层的显示隐藏：

 

ng-if指令：

决定一个元素是否存在；ng-if = "true/false";

ng-show : 元素是否显示；

ng-hide：元素是否隐藏；

ng-if：元素是否存在；

 

ng-href / ng-src 指令：

ng-href / ng-src 指令用于解决当链接类型的数据绑定造成的加载BUG，如：

 

ng-switch指令：

ng-switch指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令，如果匹配选择显示，其他未匹配的则会被移除；

你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示；

ng-switch指令的效果：

ng-switch需要配合 ng-switch-when和ng-switch-default来使用：

     
    
              www.jd.com        www.taobao.com        www.baidu.com        
      
        
       
        www.jd.com
       
        
       
        www.taobao.com
       
        
       
        www.baidu.com
       
        
       
        请选择
       
    
      
     

 

其他常用指令：

ng-cheched : 单选 / 复选是否被选中；

ng-disabled : 是否禁用；

ng-readonly : 是否只读；

ng-selected : 是否选中；

实现全选和全不选：

     
    
      
全选或者全不选
    
      
选项0
    
      
选项0
    
      
选项0
    
      
选项0
    
      
选项0
    
      
选项0
     

 

常用的事件指令：

ng-blur : 失去焦点；

ng-change : 发生改变；

ng-copy : 拷贝完成；

ng-click : 单击；

ng-dbclick : 双击；

ng-focus : 获得焦点；

ng-submit : 表单提交；

 

angularJS 的指令系统中还有一块是：自定义指令；（稍微麻烦，在此不做赘述）