博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
自定义指令的参数
阅读量:6582 次
发布时间:2019-06-24

本文共 1578 字,大约阅读时间需要 5 分钟。

指令无外乎增强了 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结构:

        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选项了。

转载于:https://www.cnblogs.com/yu-709213564/p/6156106.html

你可能感兴趣的文章
微软云计算介绍与实践(介绍之五)
查看>>
在linux下搭建HA和LB集群(lvs&heartbeat群集)
查看>>
安装wine
查看>>
阻抗匹配与史密斯(Smith)圆图基本原理
查看>>
路由器与交换机的密码恢复
查看>>
Cisco路由器上的IPSec协议(站点到站点的×××)
查看>>
Java面向对象学习笔记 -- 5(抽象类、接口)
查看>>
关于apache下同IP多域名支持HTTPS和80跳转HTTPS的配置
查看>>
Linux Python详细安装、升级指南
查看>>
软件架构
查看>>
无法修复ie使用代理服务器
查看>>
【Apache Mina2.0开发之二】自定义实现Server/Client端的编解码工厂(自定义编码与×××)!...
查看>>
JS判断终端类型
查看>>
Exchange 2013 SP1 先决条件
查看>>
关于suid/guid
查看>>
教你给IDEA安装插件
查看>>
在windows上安装curl
查看>>
使用EasyWechat为“WX公众号”增加一个访问统计的方案实现
查看>>
数据库的工具类
查看>>
深入理解PHP Opcode缓存原理
查看>>