ng自定义指令

 ng自定义指令

自定义指令( 了解 )

如果使用:
    1> 作为 属性使用 <div ng-app></div>
    2> 作为 class 使用 <div class="ng-cloak"></div>
    3> 作为标签 a
    4> 作为注释使用: <!-- directive: 指令名 -->

自定义指令语法:
    module.directive( '指令名(驼峰命名规则)', [ '...', function ( ... ) {
        return function | object;
    }] );

    1> 对象
        template: '...'
        templateUrl: '文件的路径'
        restrict: 'ECMA'
                   其中 E 表示 element 元素, 指指令可以当做元素来使用( 标签语法 )
                   其中 C 表示 class 类, 指指令可以作为 class 的属性值来使用
                   其中 M 表示 comment 注释, 指指令以注释的形式使用
                   其中 A 表示 attribute 属性, 表示可以使用属性的形式使用( 默认 )
        replace: boolean 表示是否替换容器标签
        transclude: Boolean 
                    置换, 该属性的作用是将指令容器中的内容 传递到指定的位置
                    <div ng-repeat="...">
                        ...
                    </div>
        scope: boolean | object
                默认值 false
                设置为 true 就创建一个 继承自 其容器作用域的 作用域对象
                如果赋值给 scope 一个 对象 { }, 称为 独立作用域( 隔离作用域 ), 不继承任何 scope
                如果需要给 模板中 的内容进行插值, 需要在 指令 容器中提供数据的话, 那可可以使用指绑定

        controller: 字符串 | 函数
        link: function(scope, iElement, iAttrs) { ... }   
                link 属性几乎可以说是在 ng 中唯一一个 推荐使用 dom 操作的地方
                在执行指令的时候, ng 会调用 link 方法, link 带有几个参数.
                分别是 当前作用域 scope, 当前元素的 jqlite 对象, 以及该元素的所有属性

    2> 函数
        等价于 link 函数
        module.directive( '...', function () {
            return function () { ... };
        } )
        等价
        module.directive( '...', function () {
            return {
                link: function () { ... }
            }
        } )