首页 > 代码库 > 自定义指令的参数
自定义指令的参数
指令无外乎增强了 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选项了。
自定义指令的参数
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。