ng自定义指令

来源:互联网 发布:安徽财经大学网络教学 编辑:程序博客网 时间:2024/05/17 23:28

 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 () { ... }            }        } )
0 0
原创粉丝点击