一、$scope与$rootscope作用域
$scope下的数据作为该控制器下的数据moduel，只有在该控制器下才能够访问；而$rootScope则可以可以再任何有效的地方访问到，这个有效的地方指的是ng-app声明之下的地方，也就是应用angularJS的地方。
以我的理解，就是把控制器加到哪个元素下面，相当于把其下的$scope下的元素带给了这个元素及其子孙，他们就可以访问这个控制器下$scope下的数据，其他控制器则不能。
1.$scope
$scope定义的是局部作用域，也就是只有在该控制器下才能够对其中的值进行访问。
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
<script>
function Aaa($scope){
$scope.name='tong';
}
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{name}}</p>
</div>
{{name}}
</body>
</html>
执行结果是只有第一个name显示了“tong",第二个压根没有显示；
2.$rootscope
$rootscope定义的是全局作用域，在其中定义的变量可以再任何有效的地方访问到，这个有效的地方指的是ng-app声明之下的地方，也就是应用angularJS的地方。
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
<script>
function Aaa($scope,$rootScope){
$scope.name='tong';
$rootScope.age=19;
}
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{name}}</p>
<p>{{age}}</p>
</div>
{{age}}
</body>
</html>
执行结果是:
tong
19
19
下面我把ng-app放到<div>中，执行结果如下：
tong
19
{{age}}
3.探究作用原理
其作用域原理很像JS中作用域的原理，若本作用域中有这个变量，则直接访问，若没有，则寻找上一层，依次类推。
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
<script>
function Aaa($scope,$rootScope){
$scope.name='tong';
$rootScope.age=19;
}
function Bbb($scope){
$scope.name='feng';
}
</script>
</head>
<body>
<div ng-controller="Aaa" >
<p>{{name}}</p>
<div ng-controller="Bbb">
<p>{{name}}</p>
<p>{{age}}</p>
</div>
</div>
</body>
</html>
执行结果如下：
tong
feng
19
19
二、依赖注入
我们先来看一个小例子。
<script>
function Aaa($scope,$rootScope) {
alert(123);
$scope.name = 'tong';
}
</script>
</head>
<body>
<div ng-controller="Aaa" >
<p>{{name}}</p>
</div>
执行结果是弹出了123。这也就是说Aaa执行了一次，但是我们声明了形参$scope,$rootScope，我们并没有传入实参呀！这就是依赖注入，angularJS根据我们定义的实参，自动传入了angular.min.js文件中的$scope,$rootScope，使得函数通过依赖管理系统仅仅需要声明需要的协作对象，而不需要知道从哪里来。但是要注意的是我们一定要按照要求来写形参，让js文件知道它该传入什么参数。其中$scope,$rootScope,$timeout等等在angularJs中都叫做服务，也就是说每次定义函数时，我们只要知道需要什么服务，然后直接写入形参就可以。
随机推荐
-
PHP引用(&;)使用详解
初学php关于&引用 官方文档: 1.引用是什么:http://www.php.net/manual/zh/language.references.whatare.php 2.引用做什么:ht ...
-
java多线程-CyclicBarrier
介绍 一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待,此时 CyclicBa ...
-
HttpContext.Current 的缺陷
了解ASP.NET的开发人员都知道它有个非常强大的对象 HttpContext,而且为了方便,ASP.NET还为它提供了一个静态属性HttpContext.Current来访问它,今天的博客打算就从H ...
-
JSON.stringify
$(document).ready(function (){var things =[{ id:1, color:'yellow'},{ id:2, color:'blue'},{ id:3, col ...
-
对SQL Server SQL语句进行优化的10个原则
1.使用索引来更快地遍历表. 缺省情况下建立的索引是非群集索引,但有时它并不是最佳的.在非群集索引下,数据在物理上随机存放在数据页上.合理的索引设计要建立在对各种查询的分析和预测上.一般来说:①.有大 ...
-
Qt 3D研究（九）：尝试第二边缘检测方法
Qt 3D研究(九):尝试第二边缘检测方法 三维应用程序,通过FBO.将3D图像渲染成纹理,然后对渲染成的纹理进行图像处理,终于显示在屏幕上的.是风格化后的图案.上一次我使用了一种普通的图像处理方法: ...
-
Spring 注解学习手札（七） 补遗——@ResponseBody，@RequestBody，@PathVariable （转）
最近需要做些接口服务,服务协议定为JSON,为了整合在Spring中,一开始确实费了很大的劲,经朋友提醒才发现,SpringMVC已经强悍到如此地步,佩服! 相关参考: Spring 注解学习手札(一 ...
-
Java并发知识分享
volatile的内存语义 从JSR-133(即从JDK1.5开始),volatile变量的写-读可以实现线程之间的通信 当写一个volatile变量时,JMM会把该线程对应的本地内存中的共享变量值刷 ...
-
Vue项目用于Ios和Android端开发
起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...
-
canvas的drawImage函数
HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) .drawImage函数有三种函数原型: drawImage( ...