详解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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
javascript 写类方式之四
Jul 05 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
js防抖和节流的深入讲解
Dec 06 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
BBS(php & mysql)完整版(二)
2006/10/09 PHP
ajax缓存问题解决途径
2006/12/06 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
python机器学习之神经网络(三)
2017/12/20 Python
python list转置和前后反转的例子
2019/08/26 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Django框架请求生命周期实现原理
2020/11/13 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
一道Delphi面试题
2016/10/28 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
实习教师自我鉴定
2013/12/09 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书