详解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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
Javascript 读后台cookie代码
Sep 15 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
javascript表单正则应用
Feb 04 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 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 csv操作类代码
2009/12/14 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
接受捐赠答谢词
2014/01/27 职场文书
小学体育教学反思
2014/01/31 职场文书
公司授权委托书范本
2014/04/03 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python