什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面.

 一.$rootScope

1.1 $rootScope可以理解成全局变量,一旦赋值对整个module都有效.$rootScpoe不依赖于任何一个controller,  app.run是module被加载时候执行的代码. 可以理解成Silverlight MVVM里面的oninit方法.

<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module('myapp',[]);

    app.run(function($rootScope){

        $rootScope.message="hello frank!";

    });

</script>

<head>

    <div ng-app="myapp">

        <h1>{{ message }}</h1>

    </div>

</head>

<body>

</body>

</html>

1.2 AngularJS会优先获取Controller中$scope添加的值.

代码如下: 分别有三个{message}.  testControl2中在$scope中重新赋予了message值.

<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module('myapp',[]);

    app.run(function($rootScope){

        $rootScope.message="hello frank!";

    });

    app.controller('testControl1',function(){

    });

    app.controller('testControl2',function($scope){

         $scope.message = "hello loch!";

    });

</script>

<head>

    <div ng-app="myapp">

        {{ message }}

        <div ng-controller="testControl1">

            {{ message }}

        </div>

        <div ng-controller="testControl2">

            {{ message }}

        </div>

    </div>

</head>

<body>

</body>

</html>

运行结果:  testControl2下的message被修改了.

hello frank!

hello frank!

hello loch!

  二. 控制器(ng-Controller)

ng-Controller氛围两种情况一种是包含，另一种是独立. 我们暂且叫做 父子关系和兄弟关系吧.

2.1 父子关系

2.1.1 代码如下:ChildController 包含在了ParentController里面, 两个button都对Count字段进行赋值。

<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module('myapp',[]);

    app.controller('ParentController',function($scope){

        $scope.Count = ;

        $scope.addParent = function(){

            $scope.Count+=;

        }

    });

    app.controller('ChildController',function($scope){
         // $scope.Count = 1;

         $scope.addChild = function(){

             $scope.Count+=;

         }

    });

</script>

<head>

    <div ng-app="myapp">

        <div ng-controller="ParentController">

            <span>{{ Count }}</span>

            <button ng-click="addParent()">ParentClick</button>

            <div ng-controller="ChildController">

                <span> {{Count}} </span>

                <button ng-click="addChild()">ChildClick</button>

            </div>

        </div>

    </div>

</head>

<body>

</body>

</html>

2.1.2 运行结果:(在上面demo中,有一串被注释掉的代码,)

A 代码被注解: 当一开始点击ParentClick的时候两个Count一起增加, 然后点击ChildClick的时候只有ChildDiv的Count在增加，然后再回去点击ParentClick的时候,就只有ParentCount在自增

B.代码没被注解: 两者之间的自增都是独立分开的，互补关联.

2.1.3 总结：

因为在AngularJS中会默认先找当前Controller下的值，找不到再去找父类Controller值，如果还找不到就去找$rootScope的值, 对于A类情况在没点击ChildClick的时候,ChildController还没有设置Count的值，那么对应的{Count}只有先去取ParentController里面的$scope.count的值. 当点击了ChildClick后，ChildController中的$scope.count被创建，然后两个Controller就此开始独立.

2.2 兄弟关系.

运行结果: 两个Controller下的Count独立，自增互不影响.

<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module('myapp',[]);

    app.controller('BrotherOne',function($scope){

        $scope.Count = ;

        $scope.addParent = function(){

            $scope.Count+=;

        }

    });

    app.controller('BrotherTwo',function($scope){

         $scope.Count = ;

         $scope.addChild = function(){

             $scope.Count+=;

         }

    });

</script>

<head>

    <div ng-app="myapp">

        <div ng-controller="BrotherOne">

            <span>{{ Count }}</span>

            <button ng-click="addParent()">ParentClick</button>

        </div>

        <div ng-controller="BrotherTwo">

                <span> {{ Count }} </span>

                <button ng-click="addChild()">ChildClick</button>

        </div>

    </div>

</head>

<body>

</body>

</html>

三. 本篇总结    

A.$rootScope == 全局变量

B.绑定的变量默认先从当前Controller的$scope去取

AngularJS笔记---作用域和控制器的更多相关文章

  1. AngularJS Scope(作用域)

    1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...

  2. angualrjs学习总结二(作用域、控制器、过滤器)

    一:Scope简介 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.Scope 是一个对象,有可用的方法和属性.Scope 可应用在视图和控制器上. ...

  3. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  4. AngularJS学习之旅—AngularJS Scope作用域(五)

    1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...

  5. AngularJS讲义 - 作用域

    什么是作用域? Angular中作用域(scope)是模板以及工作的上下文环境,作用域中存放了应用模型和视图相关的回调行为.作用域是层次化结构的与相关联的DOM结构相对应.作用域可以观察表达式以及传播 ...

  6. 理解AngularJS的作用域Scope

    AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...

  7. AngularJS: 自定义指令与控制器数据交互

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

  8. 黄聪：AngularJS 动态加载控制器实例-ocLoazLazy

    一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...

  9. angularJs的作用域和依赖注入

    一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找  &rootScope这是全局作用域 <!DOCTYPE HTML&g ...

随机推荐

  1. 【T-SQL】分布抽取部分数据

    好吧,我确实不知道该怎么起这个标题,整了一个“分布”,感觉还有点高档,其实没啥技术含量,看完你就知道了.情况是这样,刚刚接到一个临时任务,需要让几个营业点的销售数据[变]少一点,就是在ERP的相关报表 ...

  2. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  3. C#中 字符串转换为计算公式,并计算结果

     根据总结,大概分为以下三种: 第一种: 用DataTable中的Compute方法. 例如:" 1*2*3 " 代码如下: var a = new System.Data.Dat ...

  4. spring入门（七）【springMVC返回json串】

    现在多数的应用为了提高交互性多使用异步刷新,即在不刷新整个页面的情况下,只刷新局部,局部刷新用得最多就是ajax,ajax和后台进行交互的数据格式使用的最多的是JSON,这里简单描述,在springm ...

  5. JS高程3.基本概念（5）语句

    1.if语句 2.do-while语句:后测循环语句,循环体内的代码至少执行一次. 3.while语句:前测循环语句. 4.for语句:前测循环语句. 注意:在ECMAScript中不存在块级作用域, ...

  6. iOS开发中<null>的处理

    在iOS开发过程中经常需要与服务器进行数据通讯,JSON就是一种常用的高效简洁的数据格式. 问题: 在项目中,一直遇到一个坑的问题,程序在获取某些数据之后莫名崩溃.原因是:由于服务器的数据库中有些字段 ...

  7. Android系统的五种数据存储形式（一）

    Android系统有五种数据存储形式,分别是文件存储.SP存储.数据库存储.contentprovider 内容提供者.网络存储.其中,前四个是本地存储.存储的类型包括简单文本.窗口状态存储.音频视频 ...

  8. Android http Request / Response ContentType

    客户端在进行http请求服务器的时候,需要告诉服务器请求的类型,服务器在返回给客户端的数据的时候,也需要告诉客户端返回数据的类型. 这个类型就是  ContentType  ,不同的ContentTy ...

  9. iOS 开发中的争议（一）

    序言 打算分享一些有争议的话题,并且表达一下我的看法.这是该系列的第一篇,我想讨论的是:类的成员变量应该如何定义? 在 Objective-C 的语言的早期,类的私有成员变量是只能定义在 .h 的头文 ...

  10. 长链接转换成短链接（iOS版本）

    首先需要将字符串使用md5加密,添加NSString的md5的类别方法如下 .h文件 #import <CommonCrypto/CommonDigest.h> @interface NS ...