详解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 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
JavaScript 闭包的使用场景
Sep 17 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
推荐文章系统(一)
2006/10/09 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
jQuery 使用手册(三)
2009/09/23 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
初学Python函数的笔记整理
2015/04/07 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
《花的勇气》教后反思
2014/02/12 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
万能检讨书2000字
2014/10/17 职场文书
小学语文复习计划
2015/01/19 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP