关于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 getJSON 处理json数据的代码
Jul 26 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
JavaScript中this详解
Sep 01 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
axios学习教程全攻略
Mar 26 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
redux.js详解及基本使用
May 24 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 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开发的一些注意点总结
2010/10/12 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
学习PHP session的传递方式
2016/06/15 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
javascript的内存管理详解
2013/08/07 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
python-str,list,set间的转换实例
2018/06/27 Python
python tkinter界面居中显示的方法
2018/10/11 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Django中的静态文件管理过程解析
2019/08/01 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
Python新手学习函数默认参数设置
2020/06/03 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android