自定义指令的参数

Posted 2020-08-22 大鱼_style

指令无外乎增强了 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=‘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选项了。