详解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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
layui文件上传实现代码
May 20 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
详解TypeScript的基础类型
Feb 18 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
thinkphp分页集成实例
2017/07/24 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
MooTools 1.2介绍
2009/09/14 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
如何利用Fabric自动化你的任务
2016/10/20 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python中Apriori算法实现讲解
2017/12/10 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
Python类型转换的魔术方法详解
2020/12/23 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
上海期货面试题
2014/01/31 面试题
小学数学国培感言
2014/03/10 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
Node.js实现断点续传
2021/06/23 Javascript
解析python中的jsonpath 提取器
2022/01/18 Python