一、$scope与$rootscope作用域

$scope下的数据作为该控制器下的数据moduel，只有在该控制器下才能够访问；而$rootScope则可以可以再任何有效的地方访问到，这个有效的地方指的是ng-app声明之下的地方，也就是应用angularJS的地方。

以我的理解，就是把控制器加到哪个元素下面，相当于把其下的$scope下的元素带给了这个元素及其子孙，他们就可以访问这个控制器下$scope下的数据，其他控制器则不能。

1.$scope

　　$scope定义的是局部作用域，也就是只有在该控制器下才能够对其中的值进行访问。

  1. <!DOCTYPE html>
  2. <html ng-app>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="angular.min.js"></script>
  6.     <title></title>
  7.     <script>
  8.         function Aaa($scope){
  9.             $scope.name='tong';
  10.         }
  11.     </script>
  12. </head>
  13. <body>
  14. <div ng-controller="Aaa">
  15.     <p>{{name}}</p>
  16. </div>
  17. {{name}}
  18. </body>
  19. </html>

　　执行结果是只有第一个name显示了“tong",第二个压根没有显示；

2.$rootscope

　　$rootscope定义的是全局作用域，在其中定义的变量可以再任何有效的地方访问到，这个有效的地方指的是ng-app声明之下的地方，也就是应用angularJS的地方。

  1. <!DOCTYPE html>
  2. <html ng-app>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="angular.min.js"></script>
  6.     <title></title>
  7.     <script>
  8.         function Aaa($scope,$rootScope){
  9.             $scope.name='tong';
  10.             $rootScope.age=19;
  11.         }
  12.     </script>
  13. </head>
  14. <body>
  15. <div ng-controller="Aaa">
  16.     <p>{{name}}</p>
  17.     <p>{{age}}</p>
  18. </div>
  19. {{age}}
  20. </body>
  21. </html>

执行结果是:

tong

19

19

下面我把ng-app放到<div>中，执行结果如下：

tong

19

{{age}}

3.探究作用原理

　　其作用域原理很像JS中作用域的原理，若本作用域中有这个变量，则直接访问，若没有，则寻找上一层，依次类推。

  1. <!DOCTYPE html>
  2. <html ng-app>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <script src="angular.min.js"></script>
  6.     <title></title>
  7.     <script>
  8.         function Aaa($scope,$rootScope){
  9.             $scope.name='tong';
  10.             $rootScope.age=19;
  11.         }
  12.         function Bbb($scope){
  13.             $scope.name='feng';
  14.         }
  15.     </script>
  16. </head>
  17. <body>
  18. <div ng-controller="Aaa" >
  19.     <p>{{name}}</p>
  20.     <div ng-controller="Bbb">
  21.         <p>{{name}}</p>
  22.         <p>{{age}}</p>
  23.     </div>
  24. </div>
  25. </body>
  26. </html>

执行结果如下：

tong

feng

19

19

二、依赖注入

　　我们先来看一个小例子。

  1.     <script>
  2.         function Aaa($scope,$rootScope) {
  3.             alert(123);
  4.             $scope.name = 'tong';
  5.         }
  6.     </script>
  7. </head>
  8. <body>
  9. <div ng-controller="Aaa" >
  10.     <p>{{name}}</p>
  11. </div>

　　执行结果是弹出了123。这也就是说Aaa执行了一次，但是我们声明了形参$scope,$rootScope，我们并没有传入实参呀！这就是依赖注入，angularJS根据我们定义的实参，自动传入了angular.min.js文件中的$scope,$rootScope，使得函数通过依赖管理系统仅仅需要声明需要的协作对象，而不需要知道从哪里来。但是要注意的是我们一定要按照要求来写形参，让js文件知道它该传入什么参数。其中$scope,$rootScope,$timeout等等在angularJs中都叫做服务，也就是说每次定义函数时，我们只要知道需要什么服务，然后直接写入形参就可以。

随机推荐

  1. linux系统上查看硬件信息

    一:查看CPU more /proc/cpuinfo | grep "model name" grep "model name" /proc/cpuinfo 如 ...

  2. 学生信息系统（json模块解决数据持久化）

    将学生管理的案例,学生信息由原来的只有姓名,拓展为包含,姓名,年龄,两个属性:完成对应的增.删.查.改,操作 import json,os,time,sys student_list = [] Fil ...

  3. C#Encoding

    1.Encoding (1).如何生成一个Encoding即一种编码 Encoding位于System.Text命名空间下,是一个抽象类,它的派生类如下图: 要实例化一个Encoding一共有以下两种 ...

  4. C语言/C++编程学习：不做C/C++工作也要学C/C++的原因！

    C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...

  5. Android TextView 嵌套图片及其点击，TextView 部分文字点击，文字多颜色

    1. TextView 中嵌套图片的方法 TextView textView... textView.setText("..."); textView.append(Html.fr ...

  6. C博客作业05—指针

    1.本章学习总结 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1 学习体会 理解了指针在代码中的使用方法,学会使用指针进行参数操作 学会了结构体的定义方式与结构体的使用 经过持续一个周 ...

  7. OpenStack环境中的NFV实践

    原文链接:http://www.99cloud.net/html/2016/jiuzhouyuanchuang_1103/250.html 在开始实践之前我们首先需要了解一些NFV概念和术语. NFV ...

  8. css3 animation动画使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【timeisprecious】【JavaScript 】JavaScript RegExp \W 元字符

    JavaScript>RegExp正则表达式> \W 元字符 1 .From Runnob JavaScript RegExp \W 元字符 定义和用法: \W 元字符用于查找非单词字符. ...

  10. jquery input 实时监听输入

    $('input').bind('input propertychange', function() { alert('hello world') });