AngularJS学习笔记六 指令

1.AngularJS指令的出现形式为以下四种方式：

    E：作为HTML元素出现；

    A：作为HTML元素属性出现；

    C：作为CSS类样式出现；

    M：作为HTML注释内容出现。

2.一些常见的内置指令

ng-app    ng-model    ng-init    ng-controller    ng-disabled    ng-checked    ng-change    ng-class

ng-show    ng-hide    ng-bind    ng-if    ng-switch    ng-repeat    hg-href/src    ng-include    in-click

3.AngularJS模块对象提供了一个directive（）方法来实现自定义指令。

    ①directive（）方法接收两个参数：第一个参数为指令的名称，采用驼峰式命名法；第二个参数为指令定义方法，需要返回一个对象（指令定义对象DDO），用于描述指令的特征以及指令对应的处理逻辑。

    ②当自定义的指令采用驼峰式命名法后，在指令使用时可以使用“-”或者“：”将多个单词分隔开。例如：helloWorld指令：

<hello-World></hello-World>

    ③指令定义对象的各个属性：

    restrict：可以以什么形式出现：EACM；

    replace :是否使用template属性定义模板内容替换所在的HTML元素。Boolean值。

    template：指定AngularJS指令被替换成的HTML模板；

    link方法：link：function（scope，elem,attrs）{}

                    scope:指令作用域；

                    elem:当前指令的HTML元素；

                    attrs:表示一个对象，包含指令的所有属性及属性值；

    link方法还可以用于需要获取或修改自定义指令的属性时；监视AngularJS作用域模型数据变化时；响应HTML模板中的事件时。

    compile方法：compile:function（tElem,tAttrs）{

                                            return{    link:function(scope,iElem,iAttrs){}

                                                    }}

                        tElem:指令所在元素；

                        tAttrs:指令元素的所有属性列表；

    ④scope属性与指令作用域

        不设置指令定义对象的scope属性时：直接使用父作用域；

        scope：true：使用子作用域从父作用域原型继承；

        scope：{}：创建一个新的作用域对象和父作用域没有任何关系；

    ⑤孤立作用域与父作用域模型数据绑定

        使用@符号建立基于属性的绑定；

        使用=符号建立双向数据绑定；

        使用&符号调用父作用域中的方法；

    ⑥指令定义对象的transclude属性；

    ⑦controller方法与require属性

    指令定义对象的controller方法为指令控制器的构造方法，只要用于和其他指令进行通信，可以在构造方法中定义一些属性或者方法供其他指令调用；

    require：指令名。用于引用其他指令，这个指令名将会作为link方法的第四个参数。可以通过这个参数访问指令名的controller中的方法。

    前缀：？：当指令未找到，传递null；

               ^：当前指令控制器未找到，到父指令控制器中寻找；

                不指定：在当前指令寻找，未找到就跑出error.