原文地址

上一篇我们说到了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)的更多相关文章

  1. AngularJS指令的详解

    指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.指令是我们用来扩展浏览器能力的技术 ...

  2. angularjs的directive详解

    Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操 ...

  3. AngularJS模块的详解

    AngularJS模块的详解 在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规 ...

  4. ng-repeat指令使用详解

    ng-repeat指令使用详解 link: function(scope,element,attr) scope.$index: if(scope.$last == true){} attr['mng ...

  5. SSI指令使用详解(转)

    什么是 SHTML使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为“服务器端嵌入”或者叫“服务器端包含”,是一种类似 ...

  6. Java中String的intern方法,javap&cfr.jar反编译,javap反编译后二进制指令代码详解,Java8常量池的位置

    一个例子 public class TestString{ public static void main(String[] args){ String a = "a"; Stri ...

  7. IA-32指令解析详解

    IA-32指令解析详解 0x00 前言 这段时间忙于考试,信息论和最优化,还有算法分析,有点让人头大.期间花了几天看SEH机制,能明白个大概,但是对于VC++对于SHE的包装似乎还是不是很明白,发现逆 ...

  8. angularJS directive详解(自定义指令)

    Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...

  9. angularJS directive详解

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angul ...

  10. vue自定义指令VNode详解(转)

    1.自定义指令钩子函数 Vue.directive('my-directive', {bind: function () {// 做绑定的准备工作// 比如添加事件监听器,或是其他只需要执行一次的复杂 ...

随机推荐

  1. BZOJ-1067 降雨量 线段树+分类讨论

    这道B题,刚的不行,各种碎点及其容易忽略,受不鸟了直接 1067: [SCOI2007]降雨量 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 2859 ...

  2. 找回Reshaprer的Alt+Enter快捷键的方法

    用过Reshaprer一段时间发现这个Visual Studio插件确实是个好东东,特别是神级快捷键Alt+Enter更是好用至极,可以解决大部分代码问题,不过会发现装上Reshaprer后VS自带的 ...

  3. Linux/Unix System Level Attack、Privilege Escalation(undone)

    目录 . How To Start A System Level Attack . Remote Access Attack . Local Access Attack . After Get Roo ...

  4. jsp中 response和request区别

    1.response 属于重定向请求: 其地址栏的URL会改变: 会向服务器发送两次请求: 2. request 属于请求转发: 其地址栏的URL不会改变: 向服务器发送一次请求: 举一个区分它们的简 ...

  5. jQuery返回顶部(精简版)

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  6. 透透彻彻IoC(你没有理由不懂!)

    http://www.myexception.cn/open-source/418322.html 引述:IoC(控制反转:Inverse of Control)是Spring容器的内核,AOP.声明 ...

  7. linux 搭建SVN服务器,为多个项目分别建立版本库并单独配置权限

    1.安装svn服务    # yum install subversion   2.新建一个目录用于存储SVN所有文件    # mkdir /home/svn   3.在上面创建的文件夹中为项目 p ...

  8. nuget pack

    nuget spec nuget setApiKey yourkeynuget pack PluginMvc.Framework.csproj -Prop Configuration=Releasen ...

  9. 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 (系统找 ...

  10. [Asp.net Mvc]通过UrlHelper扩展为js,css静态文件添加版本号

    写在前面 在app中嵌入h5应用,最头疼的就是缓存的问题,比如你修改了一个样式,或者在js中添加了一个方法,发布之后,并没有更新,加载的仍是缓存里面的内容.这个时候就需要清理缓存才能解决.但又不想让w ...