详解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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
拖拉表格的JS函数
Nov 20 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
微信小程序实现底部导航
Nov 05 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
vue组件之Alert的实现代码
2017/10/17 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python+pygame实现坦克大战
2019/09/10 Python
python中如何使用虚拟环境
2020/10/14 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
Skyscanner波兰:廉价航班
2017/11/07 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
个人自我剖析材料
2014/02/07 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
PyTorch 如何自动计算梯度
2021/05/23 Python
python 爬取天气网卫星图片
2021/06/07 Python