详解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 在各个浏览器中执行的耐性
Apr 06 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
javascript中var的重要性分析
Feb 11 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
物流管理应届生求职信
2013/11/07 职场文书
求职自荐信范文格式
2013/11/29 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
国际贸易实训总结
2015/08/03 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python