一、$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. Babel 是干什么的

    首先babel是干什么的?Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. babel就是为了支持原有的旧的环境. 一.配置文件.babelrc Babel的配置 ...

  2. 开源WebGIS实施方案（四）：GeoServer发布PostGIS数据

    GeoServer可以支持多种格式的数据源,本文只介绍其中一种,即PostGIS数据源. 新建一个工作区.工作区这个名字也是一变再变,早前叫做目录,后来改为工作空间,如今已变为工作区了. 添加数据存储 ...

  3. Tempdb--Row version

    Trigger:在SQL SERVER 2005之前,触发器需要使用日志来获取DELETED AND INSERTED的数据,因此会打乱日志顺序写的模式,造成磁盘压力,在SQL Server2005 ...

  4. WebLogic 两处任意文件上传漏洞动态分析（CVE-2018-2894）

    0x01 前言 CNCERT前几天发公告称发现Oracle公司出品的基于JavaEE结构的中间件WebLogic产品存在一个远程上传漏洞,并得到了厂商的确认,危害程度评分高达9.8分.鉴于厂商已进行了 ...

  5. Windows10 下 github ssh 访问出现 Permission denied（publickey）错误的解决方法

    Windows10 下 github ssh 访问出现 Permission denied(publickey)错误的解决方法. 错误信息: git clone git@github.com:ediw ...

  6. C# GetHashCode、Equals函数和键值对集合的关系

    C# GetHashCode.Equals函数和键值对集合的关系 说明 HashCode:Hash码.特性:两个值,相同的的值生成的Hash肯定相同,Hash不同的值肯定不同. 下面一张图中,只有和“ ...

  7. winform 版本号比较

    Version now_v = new Version(strval); Version load_v = new Version(model.version.ToString()); if (now ...

  8. ASP.net 居中

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  9. 「WC2006」水管局长

    题目链接 戳我 \(Solution\) 这道题实际上是维护一个最小生成树,因为正的搞不好搞,所以反着搞会比较好,现将没有没删掉的边留下来生成一颗最小生成树,再加边就好了,现在\(LCT\) 来看看怎 ...

  10. 【12c OCP】最新CUUG OCP-071考试题库（49题）

    49.(11-1) choose the best answer Examine the structure of the SHIPMENTS table: You want to generate ...