问题引入

使用 Angular 进行过一段时间的开发后,基本上都会遇到一个这样的坑:

1
2
3
4
5
6
7
8
9
10
11
12
<div ng-controller="TestCtrl">
<p>{{name}}</p>
<div ng-if="show">
<input type="text" ng-model="name">
</div>
</div>
<script>
function TestCtrl($scope){
$scope.show = true;
$scope.name = 'htf';
}
</script>

把 p 元素和 input 元素绑定同一个变量,你本以为,在输入框输入内容,p 中显示的肯定也是随之变化的。

然而并不是这样,不管 input 中的元素怎么变, p 元素中的都没变化,WTF。

要说这是什么原因,那就要从 Angular 的作用域说起了。

作用域

每个 Angular 应用默认有一个根作用域 $rootScope, 根作用域位于最顶层,从它往下挂着各级作用域。

通常情况下,页面中 ng-model 绑定的变量都是在对应的 Controller 中定义的。如果一个变量未在当前作用域中定义,JavaScript 会通过当前 Controller 的 prototype 向上查找,也就是作用域的继承。

这又分两种情况。

基本类型变量

1
2
3
4
5
6
7
8
9
10
11
12
13
<div ng-controller="OuterCtrl">
<p>{{x}}</p>
<div ng-controller="InnerCtrl">
<input type="text" ng-model="x">
</div>
</div>
<script>
function OuterCtrl($scope){
$scope.x = 'hello';
}
function InnerCtrl($scope){
}
</script>

运行后会发现跟文章开头一样的问题,里面输入框变了,外面的没跟着变。

原因在于,InnerCtrl 中并未定义 x 这个变量,取值的时候,会沿着原型链向上找,找到了OuterCtrl 中定义的 x ,然后赋值给自己,在 InnerCtrl 的输入框输入值时,改变的是InnerCtrl 中的 x ,而对 OuterCtrl 中的 x 无影响。此时,两个 x 是独立的。

不过,如果你不嫌麻烦的话,用 $scope.$parent 可以绑定并影响上一层作用域中的基本变量:

1
<input type="text" ng-model="$parent.x">

引用类型变量

那么,如果上下级作用域想共用变量怎么办呢?

答案是使用引用类型变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div ng-controller="OuterCtrl">
<p>{{x}}</p>
<div ng-controller="InnerCtrl">
<input type="text" ng-model="x">
</div>
</div>
<script>
function OuterCtrl($scope){
$scope.data = {};
$scope.data.x = 'hello';
}
function InnerCtrl($scope){
}
</script>

在这种情况下,两者的 data 是同一个引用,对这个对象上面的属性修改,是可以反映到两级对象上的。

ng-if中的作用域

前面讲的是两级控制器之间的作用域,那跟前面提到的问题有什么关系呢?那个看着不是只有一个 Controller 吗?

其实,并不是只有 Controller 可以创建作用域,ng-if 等指令也会(隐式地)产生新作用域。

总结下来就是,ng-if、 ng-switch 、 ng-include 等会动态创建一块界面的东西,都是自带一级作用域。

因此,在开发过程中,为了避免模板中的变量歧义,应当尽可能使用命名限定,比如 data.x,出现歧义的可能性就比单独的 x 要少得多。

总结

始终将页面中的元素绑定到对象的属性(data.x)而不是 直接绑定到基本变量(x)上。

参考

AngularJS实例教程(二)——作用域与事件

AngularJS 中的作用域的更多相关文章

  1. AngularJs之Scope作用域

    前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...

  2. (九)通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

    $injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...

  3. 控制器controller与指令中的link、controller中变量作用域的关系

    angjualrjs中的作用域与原生js中的函数嵌套原理一致,都是存在作用域的继承.若在子控制器(同样包括在指令中的link或是controllerding中定义变量,此时指令中必须未使用scope独 ...

  4. angularjs 控制器、作用域、广播详解

    一.控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样& ...

  5. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  6. Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

    Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格 ...

  7. AngularJS中的控制器和作用域

    欢迎大家指导与讨论 : ) 一. 作用域的事件传播 一 . 1 修改的传播   关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修 ...

  8. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  9. AngularJs之四(作用域)

    一:angulaJs的作用域scope Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.scope 是一个 JavaScript 对象,带有属性和方 ...

随机推荐

  1. 嵌入式Linux开发

    嵌入式Linux的开发和研究是Linux领域研究的一个热点,目前已开发成功的嵌入式系统有一半以上都是Linux.Linux到底有什么优势,使之取得如此辉煌的成绩呢?本文分为两大部分:Linux的优点. ...

  2. Xcode 安装插件管理器

    https://github.com/alcatraz/Alcatraz运行之后, load bundle, 然后window就有pakagegemanage. 下载如下插件: 自动导入插件

  3. [Gradle] Gradle 构建工具的未来

    转载地址:http://www.infoq.com/cn/news/2011/04/xxb-maven-6-gradle Maven面临的挑战 软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你 ...

  4. Proxmark3命令帮助

    Proxmark3命令帮助     目录 [隐藏]  1 使用技巧 2 help 主帮助命令(基于r830以及以下版本) 3 hw 硬件检测相关命令 4 data 图形窗口/缓冲区数据操作等命令 5  ...

  5. spring+mybatis 多数据源切换

    摘自: http://www.oschina.net/code/snippet_347813_12525 1. 代码: DbContextHolder public class DbContextHo ...

  6. zedboard--嵌入式网络摄像机(mjpg-streamer)的移植和搭建(二十二)

    在zedboard上移植和搭建嵌入式网络摄像机mjpg-streamer.具体步骤如下: 来自:http://write.blog.csdn.net/postedit/13741451 1.安装lib ...

  7. Linux下QTCreator代码自动补全(是真的自动补全,不是手动触发)

    在使用Windows下的QTCreator的时候,像visual studio一样代码自动补全十分方便,而在Linux下,QTCreator似乎不能做到. 网上有些说是可以设置成手动补全,今天试了一下 ...

  8. 转:Android应用开发性能优化完全分析

    转自:http://blog.csdn.net/yanbober/article/details/48394201 1 背景 其实有点不想写这篇文章的,但是又想写,有些矛盾.不想写的原因是随便上网一搜 ...

  9. (剑指Offer)面试题11:数值的整数次方

    题目: 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 思路: 看题目似乎很简单,循环相乘不就行了吗?不是的. 需要考虑几个问题: 1. ...

  10. 循环栅栏:CyclicBarrier(司令要求任务) 读书笔记

    可以理解为循环栅栏,栅栏就是一种障碍物.假如我们将计数器设置为10,那么凑齐第一批10个线程后,计数器就会归零,然后接着凑齐下一批10个线程,这就是循环栅栏的含义. 构造器: public Cycli ...