详解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代码
Oct 09 Javascript
JavaScript this 深入理解
Jul 30 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JavaScript在web自动化测试中的作用示例详解
Aug 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
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
简单了解python模块概念
2018/01/11 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
详解python中list的使用
2019/03/15 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
大学学年自我鉴定
2013/10/28 职场文书
企业金融服务方案
2014/06/03 职场文书
中央空调节能方案
2014/06/15 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
新员工辞职信范文
2015/05/12 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书