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

随机推荐

  1. CodeForces - 669D——（思维题）

    Little Artem is fond of dancing. Most of all dances Artem likes rueda — Cuban dance that is danced b ...

  2. struts2+websocket报错：failed: Error during WebSocket handshake: Unexpected response code:404

    最近把websocket集成进项目里面来,打开网页总是会遇到这样的错误. 网上说的原因有3种,但是都不适合我,但是也记录下. 1.struts2截拦掉了ws的请求.这种援用可以尝试把web.xml清空 ...

  3. Docker Warning : the backing xfs filesystem is formatted without d_type support

    CentOS7 下安装配置 Docker,遇到如下的WARNING, WARNING: overlay: the backing xfs filesystem is formatted without ...

  4. 在TFS 2013的迭代视图中修改工作项数目限制

    当TFS迭代中的工作项数目超过500时,在TFS的网页(Web Access)显示中就会出现红色警告提示"积压工作(backlog)中的项数超出配置的限制500.当前总数为529-.&quo ...

  5. R语言中Fisher判别的使用方法

    最近编写了Fisher判别的相关代码时,需要与已有软件比照结果以确定自己代码的正确性,于是找到了安装方便且免费的R.这里把R中进行Fisher判别的方法记录下来. 1. 判别分析与Fisher判别 不 ...

  6. Apache commons StringUtils 在运行时出现NoClassDefError错误的解决方法

    Apache commons StringUtils 在运行时出现NoClassDefError错误的解决方法 在用tomcat运行WEB项目,并且使用了StringUtils包的时候,会出现 jav ...

  7. Visual Studio 2013的新特性介绍

    cnbeta新闻:微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Ser ...

  8. Oracle.DataAccess.dll方式操作oracle数据库

    Oracle.DataAccess.dll方式操作oracle数据库 一.查询语句: using (OracleConnection conn = new OracleConnection(Syste ...

  9. leetcode 56 合并区间 JAVA

    题目: 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18]] 解释: 区间 [ ...

  10. ADB模块源码分析（二）——adb server的启动

    1. ADB Server的启动 前面我们讲到adb模块的源码在system/core/adb下面,通过查看Android.mk文件我们了解到这个adb 模块回编译生成连个可执行文件adb.adbd, ...