angularjs 指令(directive)详解(2)

原文地址

上一篇我们说到了transclude,那么,我们现在继续讲解之后的内容。

9.scope

可选参数,默认值为false。取值:

false - 在这个directive里不会创建新的scope,而是继承父级的scope。

true - 为这个directive创建一个新的scope,并继承它的父级的scope。

{} - 对象,在这个directive中创建一个新的带隔离的scope,这可以防止读取或者修改父级scope的数据,创建可重用的组件全靠这个了。

对象里的值是如何与父级的scope绑定呢?通过以下属性:

(1)[email protected]或@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选项例子已有例子)

时间: 2024-10-01 19:33:01

angularjs 指令(directive)详解(2)的相关文章

AngularJS指令的详解

指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. angular在编译期间,编译器会用$interpolate服务去检查文本中是否嵌入了表达式.这个表达式会被当成一个监视器一样注册,并且作为$digest循环中的一部分,它会自动更

AngularJS指令参数详解

指令,很重要 AngularJS与jQuery最大的区别在哪里?我认为,表现在数据双向绑定,实质就是DOM的操作形式不一样. jquery通过选择器找到DOM元素,再赋予元素的行为: 而angularjs则是,将指令与DOM绑定在一起,再扩展指令的行为. 所以AngularJS开发最理想的结果就是,在页面HTML与CSS的设计时,设计工程师只需要关注指令的使用:而在背后的逻辑开发上,架构工程师则是不需要知道如何操作DOM,只需要关注指令背后的行为要如何实现就行:测试工程师也可以开发针对指令的单元

awk指令操作详解

记录与字段 awk一次从文件中读取一条记录,并将记录存储在字段变量$0中.记录被分隔为字段比功能存储在$1,$2,...$NF中,(默认使用空格或指标符为分隔符).内建参数NF为记录的字段数. #输出demo.txt 文件的第1个,第2个,第3个,第4个字段 awk '{print $1,$2,$3,$4}' demo.txt #输出demo.txt 文件整行记录 awk '{print $0}' demo.txt #输出demo.txt 该行的字段个数. awk '{print NF}' de

SSI指令使用详解(转)

什么是 SHTML使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为“服务器端嵌入”或者叫“服务器端包含”,是一种类似于ASP的基于服务器的网页制作技术.SSI工作原理:将内容发送到浏览器之前,可以使用“服务器端包含 (SSI)”指令将文本.图形或应用程序信息包含到网页中.例如,可以使用 SSI 包含时间/日期戳.版权声明或供客户填写并返回的表单.对于在多个文件中重复出现的文本或图形,使用包含文件是一种简便的方法.

IA-32指令解析详解

IA-32指令解析详解 0x00 前言 这段时间忙于考试,信息论和最优化,还有算法分析,有点让人头大.期间花了几天看SEH机制,能明白个大概,但是对于VC++对于SHE的包装似乎还是不是很明白,发现逆向工程核心原理对于这段写的太简单,至于加密与解密则是模棱两可,软件加密技术内幕倒是详解了,可是太老了,代码又是汇编写的总是编译不通过.真是让人难受!本来想写一篇SEH详解,但是基于以上原因暂时搁置.这两天看了逆向核心原理关于IA-32指令解析的内容,发现还是挺有意思,遂记录下来. 0x01 何谓IA

angularJS directive详解

前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){     return{      //通过设置项来定义     }; }) 其中return返回的对象包含很多参数,下面一一说明 1.restrict (

AngularJS的this详解

[this详解]                   1.谁最终调用函数,this指向谁.             ① this指向的,永远只可能是对象!!!!!!             ② this指向谁,永远不取决于this写在哪!!而是取决于函数在哪调用.             ③ this指向的对象,我们称之为函数的上下文context,也叫函数的调用者                    2.※※※※※this指向的规律(与函数调用的方式息息相关):             th

AngularJS开发指南4:指令的详解

指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”. 指令可以做为HTML中的元素名,属性名,类名,或者注释.下面是一些等效调用myDir指令的例子: <span my-dir="exp"></span> <span class=&

AngularJs 指令directive之require

controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单:另一种方法则是require AngularJS内建的指令,其中大部分时间需要require的都是ngModel这个指令. 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我们现在需要编写两 个指令,在linking函数中有很多重合的方法,为了避免重复自己

AngularJS开发指南6:AngularJS表单详解

表单控件(input, select, textarea )是用来获取用户输入的.表单则是一组有联系的表单控件的集合. 用户能通过表单和表单控件提供验证的服务,知道自己的输入是否合法.这样能让用户交互变得友好,因为用户能通过反馈来修正自己的错误.不过,虽然客户端的验证能够起到很大作用,但也很容易被绕过,所以不能完全依靠客户端验证. 要建立安全的应用,服务器端验证还是必不可少的. 了解AngularJS双向绑定的关键在于了解ngModel指令.这个指令通过动态将model和view互相映射,来实现