一、$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. [label][JavaScript]读nowmagic - js词法作用域、调用对象与闭包

     原文链接:                 http://www.nowamagic.net/librarys/veda/detail/1305 作用域(scope) JavaScript 中的函数 ...

  2. Apps: Help > Diagnostics > Custom Code > Personalize 查看LOV中的查询语句

    Apps Menu Path: Help > Diagnostics > Custom Code > Personalize 查看LOV中的查询语句   一直有实施顾问询问我XXFo ...

  3. Python学习-14.Python的输入输出（三）

    在Python中写文件也是得先打开文件的. file=open(r'E:\temp\test.txt','a') file.write('append to file') file.close() 第 ...

  4. Java Web系列：JDBC 基础

    ADO.NET在Java中的对应技术是JDBC,企业库DataAccessApplicationBlock模块在Java中的对应是spring-jdbc模块,EntityFramework在Java中 ...

  5. C#实现AStar寻路算法

    AStar寻路算法是一种在一个静态路网中寻找最短路径的算法,也是在游戏开发中最常用到的寻路算法之一:最近刚好需要用到寻路算法,因此把自己的实现过程记录下来. 先直接上可视化之后的效果图,图中黑色方格代 ...

  6. 没有xaml的WPF

    出于强迫症,我查了一下文档弄明白了WPF脱离xaml应该怎么搞.当然其实本质是为了MaxScript里使用做准备. using System; using System.Windows; using ...

  7. 小程序：位置信息(Location)及微信小程序LBS解决方案实践

    目前在做的小程序需要使用到map组件以及小程序个性地图,涉及到的功能如下: 1# 获取用户当前位置,返回对应的省市区 2# 根据目的地的具体地址,显示在地图中的位置 3# 根据用户当前位置,计算出 与 ...

  8. pod-infrastructure:latest镜像下载失败

    报错一:image pull failed for registry.access.redhat.com/rhel7/pod-infrastructure:latest, this may be be ...

  9. 初识阿里开源诊断工具Arthas

    上个月,阿里开源了一个名为Arthas的监控工具.恰逢近期自己在写多线程处理业务,由此想到了一个问题. 如果在本机开发调试,IDE可以看到当前的活动线程,例如IntelliJ IDEA,线程是运行还是 ...

  10. 面向对象之ajax

    1.Ajax发送请求的几个步骤 1. 创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest();//IE6 使用var xhr= new ActiveXO ...