angularjs 指令(directive)详解(2)
上一篇我们说到了transclude,那么,我们现在继续讲解之后的内容。
9.scope
可选参数,默认值为false。取值:
false - 在这个directive里不会创建新的scope,而是继承父级的scope。
true - 为这个directive创建一个新的scope,并继承它的父级的scope。
{} - 对象,在这个directive中创建一个新的带隔离的scope,这可以防止读取或者修改父级scope的数据,创建可重用的组件全靠这个了。
对象里的值是如何与父级的scope绑定呢?通过以下属性:
(1).@或@attr - 如果没有指定attr名称(即只写@),attr与directive中定义的名称一样。只能是string类型,并单向绑定到父级的scope,即继承与父级scope,但是改变directive中相应scope的值的时候,父级scope不会发生变化。
(2).=或=attr - 如果没有指定attr名称(即只写=),attr与directive中定义的名称一样。 跟父级的scope双向绑定,即改变其中一个的值,另一个也会跟着变化。
(3).&或&attr - 如果没有指定attr名称(即只写&),attr与directive中定义的名称一样。 当我们想在directive中的子级scope中调用父级的函数时,该怎么办呢?‘&’就是用来解决这个问题的。它提供了一种在父级范围中执行一个function的途径,并可以通过localFn({args1:'',args2:''})来使父级函数获取相应的数据。
10.controller
可选参数。controller会在pre-linking步骤之前进行初始化,并且可以通过其他的directive访问(详情请看require相关说明)。controller是可以被注入的,并且默认注入了以下的行为:
$scope -当前directive元素的scope
$element -当前directive的元素
$attrs - 当前元素的属性组成的对象
$transclude - 在controller里实现transclude ,下面是参数解释
function([scope], cloneLinkingFn, futureParentElement, slotName):
(1).scope: (可选参数)当前directive元素的scope
(2).cloneLinkingFn: (可选参数) 克隆当前引用的内容
(3).futureParentElement:(可选参数)
(4).slotName: (可选参数)transclude的名称。
11.require
可选参数。请求其他的directive的controller,传入当前directive的linking function中。require需要传入一个directive controller的名称。如果找不到这个名称对应的controller,那么将会抛出一个error。名称可以加入以下前缀:
(无前缀) - 找到当前元素上所需的控制器。
? -尝试找到所需要的控制器。
^ -通过搜索元素及其父级找到所需的控制器。如果没有找到引发错误。
^^ -通过搜索元素的父级找到所需的控制器。如果没有找到引发错误。
?^ -尝试通过搜索元素及其父级找到所需要的控制器。
?^^ -尝试通过搜索元素的父级找到所需要的控制器。
12.controllerAs
可选参数。设置你的控制器的别名
13.compile
compile编译函数选项
compile选项可以返回一个对象或者函数
在这里我们可以在指令和实时数据被放到DOM中之前进行DOM操作,
比如我们可以在这里进行添加或者删除节点的DOM的操作。
所以编译函数是负责对模板的DOM进行转换,并且仅仅只会运行一次。
//compile函数的语法
compile:function compile(tElement,tAttrs,transclude){
return{
pre:function preLink(scope,iElement,iAttrs,controller){},
post:function postLink(scope,iElement,iAttrs,controller){}
}
}
对于我们编写的大部分的指令来说,并不需要对模板进行转换,所以大部分情况只要编写link函数就可以了。
tips:preLink函数会在编译阶段之后,指令链接到子元素之前执行
类似的,postLink会在指令链接到子元素之后执行
这意味着,为了不破坏绑定过程,如果你需要修改DOM结构,你应该在postLink函数中来做这件事。
14.link链接函数选项
链接函数负责将作用域和DOM进行链接。
//link链接函数
link:function postLink(scope,iElement,iAttrs){}
若指令中定义有require选项,则link函数会有第四个参数,代表控制器或者所依赖的指令的控制器(上面require选项例子已有例子)
angularjs 指令(directive)详解(2)的更多相关文章
- AngularJS指令的详解
指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.指令是我们用来扩展浏览器能力的技术 ...
- angularjs的directive详解
Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操 ...
- AngularJS模块的详解
AngularJS模块的详解 在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规 ...
- ng-repeat指令使用详解
ng-repeat指令使用详解 link: function(scope,element,attr) scope.$index: if(scope.$last == true){} attr['mng ...
- SSI指令使用详解(转)
什么是 SHTML使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为“服务器端嵌入”或者叫“服务器端包含”,是一种类似 ...
- Java中String的intern方法,javap&cfr.jar反编译,javap反编译后二进制指令代码详解,Java8常量池的位置
一个例子 public class TestString{ public static void main(String[] args){ String a = "a"; Stri ...
- IA-32指令解析详解
IA-32指令解析详解 0x00 前言 这段时间忙于考试,信息论和最优化,还有算法分析,有点让人头大.期间花了几天看SEH机制,能明白个大概,但是对于VC++对于SHE的包装似乎还是不是很明白,发现逆 ...
- angularJS directive详解(自定义指令)
Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...
- angularJS directive详解
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angul ...
- vue自定义指令VNode详解(转)
1.自定义指令钩子函数 Vue.directive('my-directive', {bind: function () {// 做绑定的准备工作// 比如添加事件监听器,或是其他只需要执行一次的复杂 ...
随机推荐
- BZOJ-1067 降雨量 线段树+分类讨论
这道B题,刚的不行,各种碎点及其容易忽略,受不鸟了直接 1067: [SCOI2007]降雨量 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 2859 ...
- 找回Reshaprer的Alt+Enter快捷键的方法
用过Reshaprer一段时间发现这个Visual Studio插件确实是个好东东,特别是神级快捷键Alt+Enter更是好用至极,可以解决大部分代码问题,不过会发现装上Reshaprer后VS自带的 ...
- Linux/Unix System Level Attack、Privilege Escalation(undone)
目录 . How To Start A System Level Attack . Remote Access Attack . Local Access Attack . After Get Roo ...
- jsp中 response和request区别
1.response 属于重定向请求: 其地址栏的URL会改变: 会向服务器发送两次请求: 2. request 属于请求转发: 其地址栏的URL不会改变: 向服务器发送一次请求: 举一个区分它们的简 ...
- jQuery返回顶部(精简版)
jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- 透透彻彻IoC(你没有理由不懂!)
http://www.myexception.cn/open-source/418322.html 引述:IoC(控制反转:Inverse of Control)是Spring容器的内核,AOP.声明 ...
- linux 搭建SVN服务器,为多个项目分别建立版本库并单独配置权限
1.安装svn服务 # yum install subversion 2.新建一个目录用于存储SVN所有文件 # mkdir /home/svn 3.在上面创建的文件夹中为项目 p ...
- nuget pack
nuget spec nuget setApiKey yourkeynuget pack PluginMvc.Framework.csproj -Prop Configuration=Releasen ...
- log4j:ERROR setFile(null,true) call failed.java.io.FileNotFoundException: ..\logs\2010-1-19.log (系统找不到指定的路径。)
log4j:ERROR setFile(null,true) call failed.java.io.FileNotFoundException: ..\logs\2010-1-19.log (系统找 ...
- [Asp.net Mvc]通过UrlHelper扩展为js,css静态文件添加版本号
写在前面 在app中嵌入h5应用,最头疼的就是缓存的问题,比如你修改了一个样式,或者在js中添加了一个方法,发布之后,并没有更新,加载的仍是缓存里面的内容.这个时候就需要清理缓存才能解决.但又不想让w ...