一、$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. POJ2349 Arctic Network 2017-04-13 20:44 40人阅读 评论(0) 收藏

    Arctic Network Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 19113   Accepted: 6023 D ...

  2. Android-sdcard广播的接收处理

    有时候Android手机在开机成功后的那几秒会在状态栏通知,Sdcard开始扫描,Sdcard扫描完成,等信息 当Sdcard的状态发生改变后,系统会自动的发出广播 Sdcard的状态: 1.moun ...

  3. 在Github注册账户

    https://github.com/JasonHaoz

  4. 后台web请求代码(含https,json提交）

    后台web请求 namespace XXXX.Utilites { using System; using System.Collections.Generic; using System.IO; u ...

  5. svn: Can't convert string from 'UTF-8' to native encoding: 解决办法

    在linux中,svn co 或 svn up 时有中文文件名的文件的话,可能会报下面的错: [root@linkea-dev-srv1 ~]# svn upsvn: Can't convert st ...

  6. Debug就是Debug,Release就是Release

    现在线上发布的时候使用的是增量发布,什么是增量发布呢,就是变化什么,上什么.最近把jenkins搭建上去了,发现每次dll文件大小不一样,已查询发现原来是两个模式debuge模式与release模式搞 ...

  7. .net core webapi 定义多版本与 Swagger 的文档输出

    前提: 需要nuget  以下两个程序集 Swashbuckle.AspNetCore 我暂时用的是  4.01: Microsoft.AspNetCore.Mvc.Versioning.ApiExp ...

  8. .net图表之ECharts随笔08-bar柱状图

    之前一直都是跟着修改demo,感觉用得很吃力,现在结合上配置手册就好很多了,其实说到底就是参数的配置,所以配置手册尤为重要. 当然,这其中还是很多坑,希望可以找到对应的解决方案吧!!! 1. tool ...

  9. 【Asp.net MVC】AJAXHelper 和jQueryAjax

    在ASP.NET MVC中,有一个官方提供的AJAXHelper帮助我们做AJAX相关的东西.我用传统的jQuery AJAX技术和AJAXHelper分别实现同一个demo,特此记录一下. 由于是在 ...

  10. SparkSQL大数据实战：揭开Join的神秘面纱

    本文来自 网易云社区 . Join操作是数据库和大数据计算中的高级特性,大多数场景都需要进行复杂的Join操作,本文从原理层面介绍了SparkSQL支持的常见Join算法及其适用场景. Join背景介 ...