一、$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中都叫做服务，也就是说每次定义函数时，我们只要知道需要什么服务，然后直接写入形参就可以。