详解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 相关文章推荐
node.js中的http.createClient方法使用说明
Dec 15 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 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的面向对象编程
2006/10/09 PHP
文章推荐系统(三)
2006/10/09 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
基于vue.js实现的分页
2018/03/13 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
python实现微信自动回复机器人功能
2019/07/11 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
致垒球运动员加油稿
2014/02/16 职场文书
中班上学期个人总结
2015/02/12 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
2015年工程师工作总结
2015/04/30 职场文书
人代会简报
2015/07/21 职场文书
升学宴家长致辞
2015/07/27 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL