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

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

1.angularJs中提供了很多内置指令,它还有很强大的功能就是自定义指令

 指令:我们可以理解为在特定DOM上运行的函数,指令可以控制这个元素的功能,正是指令使得angularJs这个框架变得强大

 我们可以用directive()这个方法用来定义指令

directive()指令可以接受两个参数

 1> name(字符串)指令的名字 用来在视图中引用特定的指令

 2>factory_function(函数) :这个函数返回的是一个对象,其中定义了指令的全部行为.

2.定义指令行为的相关属性 键值对

angular.module('myApp', [])

.directive('myDirective', function() {
return {

//它告诉AngularJS这个指令在DOM中可以何种形式被声明 默认是是A 以属性的形式进行声明

restrict: String,
priority: Number,//优先级
terminal: Boolean,//这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令
template: String or Template Function: //一段HTML文本;
function(tElement, tAttrs) (...},
templateUrl: String,//用于将’其他html’文件渲染进入含有对应指令的html中。当然这里的’其他html’里面可以有我们的指令或者表达式,其实就是代码段,和在当前页面一                                     样使 用,只是抽离出去了,方便管理。这里会用异步请求的方式来得到这个文件。注意:此处会发送一个xhr请求。
replace: Boolean or String,//,如果设置了这个参数,值必须为true,因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部:
scope: Boolean or Object, 比如scope :true 如果为true 则指令模板可以访问外部作用域的 scope :{} 这样指令模板无法访问外部作用域  主要因为隔离作用域的原因
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,可以给controller 起个别名简化操作
require: String,require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数。
link: function(scope, iElement, iAttrs) { ... },//进行DOM 操作
compile: // 返回一个对象或连接函数,如下所示:
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }

 3.

初识自定义指令

 

 

 

 

      

转载于:https://www.cnblogs.com/hu-bo/p/6429707.html

你可能感兴趣的文章
AC日记——丢瓶盖 洛谷 P1316
查看>>
Source Insight 生成函数调用关系图
查看>>
【持久层】Druid简介
查看>>
Linux入门:PuTTY实现Linux和Windows文件互传
查看>>
解决java.lang.IllegalArgumentException: No converter found for return value of type
查看>>
php微信支付回调验证
查看>>
mysql导入超大sql文件方法
查看>>
Javascript 事件入门
查看>>
做.NET开发解决Extjs4智能感知
查看>>
斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时6
查看>>
Shell函数和正则表达式
查看>>
创建一个简单tcp服务器需要的流程
查看>>
想转行做web前端工程师,必学这6大技能
查看>>
Mybatis的缓存机制Cache
查看>>
如何从Java方向转向Linux C方向?
查看>>
第04次作业-树
查看>>
github
查看>>
Nginx configure
查看>>
计算机科学
查看>>
jruby环境下REDMINE安装纪要
查看>>