详解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调用WebServices的方法和4个实例
May 06 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 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
浅谈本地WAMP环境的搭建
2015/05/13 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
js实现下一页页码效果
2017/03/07 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
Python获取文件ssdeep值的方法
2014/10/05 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python手机号码归属地查询代码
2016/05/04 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Python执行时间的几种计算方法
2020/07/31 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
2014年图书室工作总结
2014/12/09 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
立春观后感
2015/06/18 职场文书
辞职离别感言
2015/08/04 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS