AngularJS 中的作用域
问题引入
使用 Angular 进行过一段时间的开发后,基本上都会遇到一个这样的坑:
1 |
<div ng-controller="TestCtrl"> |
把 p
元素和 input
元素绑定同一个变量,你本以为,在输入框输入内容,p
中显示的肯定也是随之变化的。
然而并不是这样,不管 input
中的元素怎么变, p
元素中的都没变化,WTF。
要说这是什么原因,那就要从 Angular 的作用域说起了。
作用域
每个 Angular 应用默认有一个根作用域 $rootScope, 根作用域位于最顶层,从它往下挂着各级作用域。
通常情况下,页面中 ng-model
绑定的变量都是在对应的 Controller 中定义的。如果一个变量未在当前作用域中定义,JavaScript 会通过当前 Controller 的 prototype 向上查找,也就是作用域的继承。
这又分两种情况。
基本类型变量
1 |
<div ng-controller="OuterCtrl"> |
运行后会发现跟文章开头一样的问题,里面输入框变了,外面的没跟着变。
原因在于,InnerCtrl
中并未定义 x
这个变量,取值的时候,会沿着原型链向上找,找到了OuterCtrl
中定义的 x
,然后赋值给自己,在 InnerCtrl
的输入框输入值时,改变的是InnerCtrl
中的 x
,而对 OuterCtrl
中的 x
无影响。此时,两个 x
是独立的。
不过,如果你不嫌麻烦的话,用 $scope.$parent
可以绑定并影响上一层作用域中的基本变量:
1 |
<input type="text" ng-model="$parent.x"> |
引用类型变量
那么,如果上下级作用域想共用变量怎么办呢?
答案是使用引用类型变量。
1 |
<div ng-controller="OuterCtrl"> |
在这种情况下,两者的 data
是同一个引用,对这个对象上面的属性修改,是可以反映到两级对象上的。
ng-if中的作用域
前面讲的是两级控制器之间的作用域,那跟前面提到的问题有什么关系呢?那个看着不是只有一个 Controller 吗?
其实,并不是只有 Controller 可以创建作用域,ng-if
等指令也会(隐式地)产生新作用域。
总结下来就是,ng-if
、 ng-switch
、 ng-include
等会动态创建一块界面的东西,都是自带一级作用域。
因此,在开发过程中,为了避免模板中的变量歧义,应当尽可能使用命名限定,比如 data.x
,出现歧义的可能性就比单独的 x
要少得多。
总结
始终将页面中的元素绑定到对象的属性(data.x
)而不是 直接绑定到基本变量(x
)上。
参考
AngularJS 中的作用域的更多相关文章
- AngularJs之Scope作用域
前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...
- (九)通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
$injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...
- 控制器controller与指令中的link、controller中变量作用域的关系
angjualrjs中的作用域与原生js中的函数嵌套原理一致,都是存在作用域的继承.若在子控制器(同样包括在指令中的link或是controllerding中定义变量,此时指令中必须未使用scope独 ...
- angularjs 控制器、作用域、广播详解
一.控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样& ...
- AngularJS 中 Controller 之间的通信
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...
- Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格 ...
- AngularJS中的控制器和作用域
欢迎大家指导与讨论 : ) 一. 作用域的事件传播 一 . 1 修改的传播 关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修 ...
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- AngularJs之四(作用域)
一:angulaJs的作用域scope Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.scope 是一个 JavaScript 对象,带有属性和方 ...
随机推荐
- 嵌入式Linux开发
嵌入式Linux的开发和研究是Linux领域研究的一个热点,目前已开发成功的嵌入式系统有一半以上都是Linux.Linux到底有什么优势,使之取得如此辉煌的成绩呢?本文分为两大部分:Linux的优点. ...
- Xcode 安装插件管理器
https://github.com/alcatraz/Alcatraz运行之后, load bundle, 然后window就有pakagegemanage. 下载如下插件: 自动导入插件
- [Gradle] Gradle 构建工具的未来
转载地址:http://www.infoq.com/cn/news/2011/04/xxb-maven-6-gradle Maven面临的挑战 软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你 ...
- Proxmark3命令帮助
Proxmark3命令帮助 目录 [隐藏] 1 使用技巧 2 help 主帮助命令(基于r830以及以下版本) 3 hw 硬件检测相关命令 4 data 图形窗口/缓冲区数据操作等命令 5 ...
- spring+mybatis 多数据源切换
摘自: http://www.oschina.net/code/snippet_347813_12525 1. 代码: DbContextHolder public class DbContextHo ...
- zedboard--嵌入式网络摄像机(mjpg-streamer)的移植和搭建(二十二)
在zedboard上移植和搭建嵌入式网络摄像机mjpg-streamer.具体步骤如下: 来自:http://write.blog.csdn.net/postedit/13741451 1.安装lib ...
- Linux下QTCreator代码自动补全(是真的自动补全,不是手动触发)
在使用Windows下的QTCreator的时候,像visual studio一样代码自动补全十分方便,而在Linux下,QTCreator似乎不能做到. 网上有些说是可以设置成手动补全,今天试了一下 ...
- 转:Android应用开发性能优化完全分析
转自:http://blog.csdn.net/yanbober/article/details/48394201 1 背景 其实有点不想写这篇文章的,但是又想写,有些矛盾.不想写的原因是随便上网一搜 ...
- (剑指Offer)面试题11:数值的整数次方
题目: 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 思路: 看题目似乎很简单,循环相乘不就行了吗?不是的. 需要考虑几个问题: 1. ...
- 循环栅栏:CyclicBarrier(司令要求任务) 读书笔记
可以理解为循环栅栏,栅栏就是一种障碍物.假如我们将计数器设置为10,那么凑齐第一批10个线程后,计数器就会归零,然后接着凑齐下一批10个线程,这就是循环栅栏的含义. 构造器: public Cycli ...