关于angularJs指令的Scope(作用域)介绍


Posted in Javascript onOctober 25, 2016

每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{};默认情况下是false。

1.scope = false

JS 代码:

关于angularJs指令的Scope(作用域)介绍

html 代码:

关于angularJs指令的Scope(作用域)介绍

result:

关于angularJs指令的Scope(作用域)介绍

修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性。

2. scope=true

修改上面的JS代码,将指令中的:scope:false修改为scope:true

然后我们再试着在我们的input输入框中写一些字符串,会发现,指令中的那个name发生了变化,但是指令外的那个name却没有发生变化,这说明了一个问题。

当我们将scope设置为true的时候,我们就新创建了一个作用域,只不过这个作用域是继承了我们的父作用域;我觉得可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。
当我们将scope设置为false的时候,我们创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中。

3. scope={}

当我们将scope设置为{}时,意味着我们创建的一个新的与父作用域隔离的新的作用域,这使我们在不知道外部环境的情况下,就可以正常工作,不依赖外部环境。

JS代码:

关于angularJs指令的Scope(作用域)介绍

html代码:

关于angularJs指令的Scope(作用域)介绍

result:

关于angularJs指令的Scope(作用域)介绍

修改文本框内容只有指令中的名字会被修改.

scope: {@=&}

@
这是一个单项绑定的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive my-name="{{name}}"></div>,注意,属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

=
这是一个双向数据绑定前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive age="age"></div>,注意,数据的双向绑定要通过=前缀标识符实现,所以不可以使用{{}}。

&
这是一个绑定函数方法的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive change-my-age="changeAge()"></div>,注意,属性的名字要用-将多个个单词连接。

以上就是小编为大家带来的关于angularJs指令的Scope(作用域)介绍全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
Javascript基础之数组的使用
May 13 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
JS匿名函数实例分析
Nov 26 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
javascript 中的事件委托详解
Oct 25 #Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 #Javascript
分分钟玩转Vue.js组件
Oct 25 #Javascript
谈谈target=_new和_blank的不同之处
Oct 25 #Javascript
js实现上传图片预览方法
Oct 25 #Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 #Javascript
微信小程序 倒计时组件实现代码
Oct 24 #Javascript
You might like
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
JavaScript开发时的五个注意事项
2007/12/08 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
南京某公司笔试题
2013/01/27 面试题
小学生班会演讲稿
2014/01/09 职场文书
免职证明样本
2014/10/23 职场文书
材料员岗位职责
2015/02/10 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
社区服务理念口号
2015/12/25 职场文书