首页 > 代码库 > 自定义指令的参数

自定义指令的参数

指令无外乎增强了 HTML,提供额外的功能 
以上的指令基本上已经可以满足我们的绝大多数需要了 
少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现。

从更高的层次上说,指令是DOM元素上的一些标记(例如: 属性,元素名称,注释和一些CSS的类)用于转换DOM元素的内部或者对DOM元素进行一些行为上的绑定。

    • 注意事项

      • 自定义指令和自定义控制器都必须要挂载在模块之下。因为自定义指令的directive是angular.module下的一个方法,点击这里查看
      • 具体用法为 angular.module(‘moduleName‘,[]).directive(name, directiveFactory);
      • angular.module 可以使用链式编程的形式,返回模块本身,可定义多个指令。
      • 定义指令的时候用驼峰命名法如:myDirective , 使用的时候用匈牙利命名法:my-directive
      • 自定义指令可以把一段重复使用的方法封装起来,类似封装一些组件来使用。
    • 对return中的一些常用选项的说明 ,官方文档的说明(访问不了,可能是因为文档上的路由设置,需要一层层的点进去查看),就不再举例了。

      • template : 用于将一段自定义的代码绑定到含有对应指令的html中。
      • templateUrl : 用于将’其他html’文件渲染进入含有对应指令的html中。当然这里的’其他html’里面可以有我们的指令或者表达式,其实就是代码段,和在当前页面一样使用,只是抽离出去了,方便管理。这里会用异步请求的方式来得到这个文件。注意:此处会发送一个xhr请求。
      • transclude : 值为布尔型,需要在template中添加一个内置指令ng-transclude,将含有这个自定义指令中的内容,放入到template中去渲染,然后放到含有自定义指令的DOM元素内。
      • replace : 值为布尔型, 开启后就会把含有自定义指令的DOM元素,替换成template中的内容。
      • scope : 规范指令的作用域的问题,如果没写,ng中默认的是放在根作用域中的,一般每个控制器就会有一个作用域,每个指令也会存在一个作用域,并且作用域存在继承关系,我们为了规范作用域,可以在自定义指令中有一个scope选项,在scope内部定义一些属性。下面是示例代码。 
        html结构:

        <div ng-app=‘myApp‘><haha title=‘hello‘ data=http://www.mamicode.com/‘world‘></haha></div>

        javascript结构:

        angular.module(‘myApp‘,[])
          .directive(‘haha‘,[function(){return {
              scope:{
                title:‘@‘,
                data:‘@‘
              },
              template:‘{{title}} {{data}}‘
            }
          }])

        代码输出 hello world 其中 @ 表示 scope中的属性值,引用了使用自定义指令的DOM元素的属性值。

      • restrict : 用于指定自定义指令的类型。 A,表示只匹配属性。E,表示只匹配元素。C,表示只匹配类名。AEC,表示三种都可以作为匹配项。而M,匹配注释指令,已经被高版本抛弃使用了,我们推荐使用A和E。

      • link函数 : angular 中允许在这个内部进行一些dom操作,格式是这样的: link:function(scope, element, attrs){} scope代表的是当前指令的作用域,element代表当前元素,attrs代表元素的属性,在里面用的是jqlite里面的api。备注,如果只去操作dom,那么我们只需要return一个函数就行了,不用 link选项了。

自定义指令的参数