一、$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. 团体程序设计天梯赛L1-017 到底有多二 2017-03-22 17:31 155人阅读 评论(0) 收藏

    L1-017. 到底有多二 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一个整数"犯二的程度"定义为该数 ...

  2. Python作图笔记

    感谢莫烦大神,附带他的个人网站链接:https://morvanzhou.github.io/ 再带上官方的文档,多看文档啊!不然参数忘了就没地方查了:https://matplotlib.org/a ...

  3. Android-GsonUtil-工具类

    GsonUtil-工具类 是把Google提供的Gons进行了方法封装,提供了关于一些常用的Gons使用的公共方法: package common.library.utils; import andr ...

  4. 在Github注册账户

    https://github.com/JasonHaoz

  5. urlrewrite重写url（转）

    环境: Maven 3.0.4 Urlrewrite 2.5.2 Myeclipse 8.6.1 借此机会顺便提一下 Maven Project 的创建,会了的朋友或还不想了解 Maven 的朋友,可 ...

  6. Git 安装配置，key导入

    系统 Centos 6.5 安装git 命令  yum install  git 配置git用户名 git config --global user.name "yangchengguo&q ...

  7. VUE 学习笔记 三 模板语法

    1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...

  8. 朋友，请待你的朋友——BUG好一点！

    程序猿嘛,难免会被BUG缠身,我相信,没有一个程序猿在被BUG缠身时是感觉轻松的,消灭BUG一定是你最大的愿望.本周,我们团队的项目进入调试阶段,各种BUG层出不穷,眼看下个周就要进行项目答辩会,所以 ...

  9. sql查询优化--数字转换字符串字段

    SELECT top 1 pt.* FROM t1where id='20180731223014' SELECT top 1 pt.* FROM t1where id='0180731223014 ...

  10. 简易网页 html

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...