详解Angular.js指令中scope类型的几种特殊情况


Posted in Javascript onFebruary 21, 2017

前言

大家都知道在默认情况下,指令应该访问父作用域.如果我们对指令暴露了父控制器的scope,那么指令就可以自由的修改scope属性.在一些情况下,你的指令可能想要添加一些只有内部可以使用的属性和函数,如果我们都在父作用域中完成,可能会污染了父作用域,因此,我们有以下两种选择:

使用父作用域-如果不需要操作父作用域属性,不需要一个新的作用域,可以直接使用父作用域

scope:false

一个子作用域-这个作用域会原型继承父作用域

scope:true

一个隔离的作用域-一个全新的、不继承、独立存在的作用域

scope:{}

作用域可以由指令定义对象中的scope属性定义,下面是关于scope属性的一些说明:

指令中的scope常见的类型

=

  1. '=',用于子作用域与父作用域双向绑定.使用这种方法可以将一个实际的作用域模型赋值给一个属性,而不是一个普通的字符串.效果是你可以传递复杂的数据模型,例如数组/对象等到隔离作用域.父作用域或者子作用域属性发生了改变,会相应影响对方.
  2. '=?',这种情况可以避免父作用域属性中不存在当前属性情况,避免抛出异常.--'If the parent scope property doesn't exist, it will throw a NON_ASSIGNABLE_MODEL_EXPRESSION exception. You can avoid this behavior using `=?` or `=?attr` in order to flag the property as optional.'
  3. '=*',If you want to shallow watch for changes (i.e. $watchCollection instead of $watch) you can use `=*` or `=*attr` (`=*?` or `=*?attr` if the property is optional).

&

  1. '&',用于执行父作用域中的函数.

@

  1. '@',进行单项文本绑定.使用这种方法可以将字符串传递到属性,当父作用域属性发生变化时,隔离作用域模型也发生变化.然而,反之则不成立!你不能通过操纵隔离作用域来改变父作用域.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 #Javascript
jQuery实现文档树效果
Feb 20 #Javascript
js以及jquery实现手风琴效果
Apr 17 #Javascript
写jQuery插件时的注意点
Feb 20 #Javascript
Node.js获取前端ajax提交的request信息
Feb 20 #Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 #Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 #Javascript
You might like
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python中的装饰器详解
2015/04/13 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
客户代表自我评价范例
2013/09/24 职场文书
支部组织生活会方案
2014/06/10 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
健康状况证明模板
2014/10/23 职场文书
2014年女职工工作总结
2014/11/27 职场文书
学校运动会加油词
2015/07/18 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis