详解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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
微信小程序 网络通信实现详解
Jul 23 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 zend解密软件绿色版测试可用
2008/04/14 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php获取微信openid方法总结
2019/10/10 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
2019/02/21 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python requests 使用快速入门
2017/08/31 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python 互换字典的键值对实例
2019/02/12 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python如何控制进程或者线程的个数
2020/10/16 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
连锁经营管理专业大学生求职信
2013/10/30 职场文书
学校工作推荐信范文
2014/07/11 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
会计主管竞聘书
2015/09/15 职场文书
工程移交协议书
2016/03/24 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
如何通过cmd 连接阿里云服务器
2022/04/18 Servers