首页 技术 正文
技术 2022年11月21日
0 收藏 889 点赞 4,520 浏览 2103 个字

原文地址

上一篇我们说到了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选项例子已有例子)

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,104
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,581
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,428
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,835
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,918