关于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 相关文章推荐
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
简述vue中的config配置
Jan 23 Javascript
js实现一个简易计算器
Mar 30 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP中的替代语法介绍
2015/01/09 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JavaScript 调试器简介
2009/02/21 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
Underscore源码分析
2015/12/30 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
python图像处理之镜像实现方法
2015/05/30 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python3实现高效的端口扫描
2019/08/31 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
想学画画?python满足你!
2020/12/24 Python
python实现图片转字符画的完整代码
2021/02/21 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
圣诞节红领巾广播稿
2014/02/03 职场文书
党风廉政承诺书
2014/03/27 职场文书
大学专科求职信
2014/07/02 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
2019年思想汇报
2019/06/20 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
angular异步验证器防抖实例详解
2022/03/31 Javascript
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏