详解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 日期常用的方法
Nov 11 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
vue2.0之多页面的开发的示例
Jan 30 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
JS实现可控制的进度条
Mar 25 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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
深入解析Python中的线程同步方法
2016/06/14 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
学习Python需要哪些工具
2020/09/04 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
大学生职业生涯规划书
2014/03/14 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
创业的9条正确思考方式
2019/08/26 职场文书