关于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中选择块并改变属性值的方法
Jul 31 Javascript
JavaScript事件委托实例分析
May 26 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
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
探讨php中header的用法详解
2013/06/07 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
Javascript注入技巧
2007/06/22 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
js实现轮播图特效
2020/05/28 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python随机数分布random测试
2018/08/27 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
中学生打架检讨书
2014/02/10 职场文书
兵马俑的导游词
2015/02/02 职场文书
2015年市场部工作总结
2015/04/30 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python