angular 自定义指令的配置方法

发表于

angular 自定义指令的配置方法

自定义模板的作用

封装好需要的方法方便使用

配置属性及用途简介

  1. template:产生一个模板

    1
    template:'<p>我的模板</p>'

  2. templateUrl:引入一个外部模板

    1
    templateUrl:'url.html'

  3. scope:boolean或对象 定义该模板是否产生自己的作用域，如果不定义则为false。如果没有形成自己的作用域，该模板的作用域为父级作用域

  4. replace:boolean 定义该模板是否替换原有DOM结构

  5. restrict:’ECMA’ 定义模板可以使用的方式

    • E:element 作为元素标签调用

      1
      <mytemplate></mytemplate>

    • C：class 作为样式类名调用

      1
      <div class="mytemplate"></div>

    • M：comment 作为注释使用

      1
      <!-- directive:mytemplate -->

    • A：attribute 作为属性名调用

      1
      <div mytemplate></div>

  6. transclude 保存原有标签内的内容，与ng-transclude联合使用 如：

    1
    <p>我是原始DOM结构<span ng-transclude>我是会保留下来的部分</span></p>

    其中带有ng-transclude属性的span标签下的内容会保留
    ps：ng-transclude会形成作用域

  7. link 实现该模板作用域与模板属性、模板DOM元素间的链接，用以封装方法

    1
    2
    3
    4
    5
    6
    7
    /*
    * @param scope 当前模板作用域，如果当前模板没有形成作用域，会直接找父级作用域
    * @param element 当前自定义指令所在的DOM元素，是一个jQ对象，angular内置轻量级jQ，也就是jqLite
    * @param attrs 自定义指令所在的DOM元素上的属性存储在attrs对象中
    */
    link:function  (scope,element,attrs) {      
    }

配置选项 代码实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var myApp=angular.module('myApp',[]);
   myApp.directive('mytemplate',function  () {
       //定义一个指令,命名是驼峰命名法，使用时用-分割，将大写转为小写
       return {
           //返回值是对象
           template:'<p>我的模板<span ng-transclude></span></p>',
           //或者引入外界模板
           //templateUrl:'url.html',
           //替换掉原有DOM结构
           replace:true,
           //定义指令可以用的位置,默认：'EA'
           restrict:'ECMA',
           //启用transclude
           transclude:true,
	//模板会形成自己作用域
           scope:true,
           link:function (scope,element,attrs) {
           	
           }
  }
   })