博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularjs中directive声明scope对象的用法
阅读量:5093 次
发布时间:2019-06-13

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

总的来说用法 分三种:

》1: scope: false  --> 继承父域,实现 双向数据绑定

示例代码 可自测:

    
directive属性 scope:{}

scope:false --> 继承父域,实现 双向数据绑定

姓名: 年龄: 性别:

 

》2: scope: true  -->  

初始化,继承父域;

子域属性值没有发生改变前,可实现 单向数据绑定(父变 --> 子变);

子域属性值发生改变后,实现子域与发父域隔离(父变 --> 子不变);

示例代码 可自测:

    
directive属性 scope:{}

scope:true --> 初始化,继承父域; 子域属性值没有发生改变前,可实现 单向数据绑定(父变 --> 子变); 子域属性值发生改变后,实现子域与发父域隔离(父变 --> 子不变)

姓名: 年龄: 性别:

 

》3:

scope 的绑定方式:“@”、“=”、“&” 

绑定的名称:要全为小写 中间可用 “-” 符号连接, 绑定到到 scope中时,去掉“-”,并将“-”后第一个字符改为大写,驼峰式命名 

scope 绑定方式的区别:

“=”:指令中的属性取值为controller中对应$scope上属性的取值,可用于双向数据的绑定. 

“@”:

1.指令中的取值为html中的字面量/直接量. 即:attr="xxx"时,"@attr"形式得到的是 “xxx”字符串;

2.绑定 controller中的$scope property. 即:arrt="{

{xxx}}",或者其它绑定$scope.property时,“@attr"形式得到的是$scope.property。

可用于单向数据绑定。父(改变)-->子(改变),子(改变)-->父(不改变)。

“&”:指令中的取值为Contoller中对应$scope上的属性,但是这属性必须为一个函数回调。

当为"func:&aa"时,传值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如 <div my-directive aa="xxfunction(arg1, arg2,......)"></div>

示例代码 可自测:

    
directive属性 scope:{}

总结:

scope 的绑定方式:“@”、“=”、“&”
绑定的名称:要全为小写 中间可用 “-” 符号连接, 绑定到到 scope中时,去掉“-”,并将“-”后第一个字符改为大写,驼峰式命名
scope 绑定方式的区别:
“=”:指令中的属性取值为controller中对应$scope上属性的取值,可用于双向数据的绑定.
“@”: 1.指令中的取值为html中的字面量/直接量. 即:attr="xxx"时,"@attr"形式得到的是 “xxx”字符串;
2.绑定 controller中的$scope property. 即:arrt="{
{xxx}}",或者其它绑定$scope.property时,“@attr"形式得到的是$scope.property。 可用于单向数据绑定。父(改变)-->子(改变),子(改变)-->父(不改变)。
“&”:指令中的取值为Contoller中对应$scope上的属性,但是这属性必须为一个函数回调。 当为"func:&aa"时,传值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如

<div my-directive aa="xxfunction(arg1, arg2,......)"></div>

姓名: 年龄: 性别:

 

转载于:https://www.cnblogs.com/cnblogs-jcy/p/6740419.html

你可能感兴趣的文章
将中缀表达式转化为后缀表达式
查看>>
浅谈TCP/IP网络编程中socket的行为
查看>>
向论文作者要代码的邮件怎么写
查看>>
Gdcm源码编译with python wrap详解
查看>>
git命令
查看>>
(greedy)Best Time to Buy and Sell Stock II
查看>>
朋友圈入驻360云盘?这么赤果果微信造吗?
查看>>
微信硬件平台智能家居行业解决方案
查看>>
SGU 326 Perspective
查看>>
HDU 2234 无题I
查看>>
乱七八糟 Nodejs 系列一:试水
查看>>
触摸旋转移动
查看>>
【luogu P4114 Qtree1】 题解
查看>>
python中类方法、类实例方法、静态方法的使用与区别
查看>>
使用python生成c文件模板
查看>>
关于树节点巨多时获取用户选中(可多选)节点的优化
查看>>
Java基础之类
查看>>
[JLOI2008] CODES
查看>>
Eclipse安装ADT插件
查看>>
Xamarin开发Android时Visual Studio 2012没有智能提示解决办法
查看>>