$scope作用域与依赖注入
一、$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中都叫做服务，也就是说每次定义函数时，我们只要知道需要什么服务，然后直接写入形参就可以。
随机推荐
- 看图说说class文件结构（部分）
- Linux中许多常用命令是必须掌握的，这里将我学linux入门时学的一些常用的基本命令分享给大家一下，希望可以帮助你们。
Linux中许多常用命令是必须掌握的,这里将我学linux入门时学的一些常用的基本命令分享给大家一下,希望可以帮助你们. 这个是我将鸟哥书上的进行了一下整理的,希望不要涉及到版权问题. 1.显示日期的 ...
- windows7 不能更新,提示:"WindowsUpdate_80240016" "WindowsUpdate_dt000",如何解决？
计算机(右键) ---- 管理 -------- 服务和应用程序 -----服务(找到名称为windows update的服务,并且在windwos update服务右键 选择重新启动 ) 再次安装更 ...
- JAVA AQS源码分析
转自: http://www.cnblogs.com/pfan8/p/5010526.html JAVA AQS的全称为(AbstractQueuedSynchronizer),用于JAVA多线程的 ...
- NLog日志框架简写用法
本文转载:http://www.blogjava.net/qiyadeng/archive/2013/02/27/395799.html 在.net中也有非常多的日志工具,今天介绍下NLog.NLog ...
- type="submit" 和type="button"
今天,小菜鸟又遇到一个问题,当不小心在页面输入框回车一下,结果莫名的页面发出了一个请求. 把问题定位在一个button上,代码是这样写的<button class="btn btn-d ...
- CDI(Weld)高级<4> Event(事件) （转）
目录[-] 1. Event payload(事件的有效载入) 2. Event observers(event的观察者) 3. Event producers(event生产者) 4.Annotat ...
- Web 协议 HTTP1.0 HTTP1.1 SPDY HTTP2.0
Web 协议 HTTP1.0 HTTP1.1 SPDY HTTP2.0 HTTP1.0 VS HTTP1.1 长连接HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而H ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- [Erlang21]Erlang性能分析工具eprof fporf的应用
前段时间项目改代码突然cpu波动很大,排查了好久都没有找到原因,只能求助于性能测试工具 : <<Erlang程序设计>>----Joe Armstorng[哈哈,登月第一人 ...