详解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 Dialog 弹出层对话框插件
Aug 09 Javascript
潜说js对象和数组
May 25 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 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的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
永不消失的title提示代码
2007/02/15 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python搜索指定目录的方法
2015/04/29 Python
独特的python循环语句
2016/11/20 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
python如何变换环境
2020/07/21 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
平安校园建设方案
2014/05/02 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL