首先引入 angular 的根作用域：$rootScope

ng-app:定义了angualr的作用域

ng-controller:定义了控制器

$scope定义了视图与控制器之间的纽带，而scope本身是垂直继承的，当子作用域没有定义，便会找父作用域，逐层往上找直到根作用域 $rootScope.

没有定义控制器的元素对应的即是根作用域，如下（<div>{{msg}}</div>）

看下面代码，当我们点击parent控制器时，发现其子控制器内容会跟着变化，而父控制器以及根作用域绑定的元素内容没有变化（msg默认在各作用域都没有定义，因此继承根作用域的msg="Hello KiTy"）：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7.      <title>test</title>
  8.  </head>
  9.  <body ng-app = "myApp">
  10.      <div>{{msg}}</div>
  11.      <div ng-controller="parent" ng-click="change()">{{msg}}
  12.          <div ng-controller="child">{{msg}}</div>
  13.          <div ng-controller="child1" ng-click="change1()">{{msg}}</div>
  14.          <div ng-controller="child2">{{msg}}</div>
  15.      </div>
  16.  <script src="angular.js"></script>
  17.  <script>
  18.  
  19.      var app = angular.module('myApp', []);
  20.      app.run(function($rootScope){　　　　　　　　　　//run方法根作用域$rootScope的方法,因其没有控制器,不能用controller方法
  21.          var msg = "Hello KiTy"
  22.          $rootScope.msg = msg;
  23.      })
  24.      app.controller("parent", function($scope){
  25.          $scope.change = function(){
  26.               $scope.msg = "lol";
  27.          }
  28.      })
  29.      app.controller("child", function($scope){
  30.  
  31.      })
  32.      app.controller("child1", function($scope){
  33.  
  34.      })
  35.      app.controller("child2", function($scope){
  36.  
  37.      })
  38.  </script>
  39.  </body>
  40.  </html>

由上不难发现scope是垂直继承，且是单向由上当下的，即父作用域不会继承子作用域数据绑定的值

若想通过子作用域传递其数据到父作用域可以在子控制器函数中加以下代码：

方法一：

  1.  app.controller("parent", function($scope，$rootScope){
  2.          console.log($scope)
  3.          $scope.change = function(){
  4.              $rootScope.msg = "lol";
  5.          }
  6.      })

方法二：

  1.  app.controller("parent", function($scope){
  2.          console.log($scope)
  3.          $scope.change = function(){
  4.              $scope.$parent.msg = "lol";
  5.          }
  6.      })

那么找个$parent怎么来的？答案：console.log($scope)；控制台输出$scope后找到的，意为其父作用域

当然了我们还发现了兄弟作用域$$prevSibling、$$nextSibling,可以通过这两项来改变兄弟作用域内数据，意为前一个兄弟、后一个兄弟

代码：

  1.  app.controller("child1", function($scope){
  2.          console.log($scope);
  3.          $scope.change1 = function(){
  4.               $scope.$$prevSibling.msg = "lol";
    　　　　　　　　　$scope.$$nextSibling.msg = "lol";
  5.          }
  6.      })

通过以上分析我们发现作用域层级关系就像DOM树型机构，一 一对应，有根作用域 $rootScope,子作用域 $scope ,每一个子作用域有其兄弟作用域

可通过 $parent; $$prevsibling; $$nextSibling 向其父作用域以及兄弟作用域传递数据。（若子作用域默认有数据绑定，则不会受其他作用域影响）

Angular作用域的层级概念(scope)的更多相关文章

  1. angular源码分析：angular中$rootscope的实现——scope的一生

    在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...

  2. angular controller as syntax vs scope

    今天要和大家分享的是angular从1.2版本开始带来了新语法Controller as.再次之前我们对于angular在view上的绑定都必须使用直接的scope对象,对于controller来说我 ...

  3. 从零开始讲解JavaScript中作用域链的概念及用途

    从零开始讲解JavaScript中作用域链的概念及用途 引言 正文 一.执行环境 二.作用域链 三.块级作用域 四.其他情况 五.总结 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号搜 ...

  4. Angular——作用域

    基本介绍 应用App是无法嵌套的,但是controller是可以嵌套的,每个controller都会对应一个模型(model)也就是$scope对象,不同层级的controller下的$scope遍产 ...

  5. angular作用域分析

    angualr作用域 Scope 控制器作用域的继承特性Ⅰ 绑定的数据是变量 单向隔离(兄弟之间互不影响,父子之间单向继承) 父级控制器的数据绑定会影响到子级控制器 前提是子控制器内没有绑定数据 单向 ...

  6. Python基础－作用域和命名空间（Scope and Namespace）

    在Python中,对象是独立的,不同作用域中的不同名字都可以被绑定在同一个对象上,当然对这个对象的修改会影响所有的引用.赋值操作就是名字和对象的绑定或重绑定.这和C++中的引用是一样的. 1,基础概念 ...

  7. angular学习（三）-- $scope

    1.3 视图数据模型:$scope $scope 是用来视图和数据之间的胶水.粘合剂 视图和控制器之间的数据桥梁 用于在视图和控制器之间传递数据 用来暴露数据模型(数据.行为) 监视模型数据的变化,做 ...

  8. angular.js学习笔记--概念总结

    好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...

  9. 2 Angular 2 的核心概念

    一.组件(Components): 组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分.组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成 ...

随机推荐

  1. OC 面试问题汇总

    OC 问题汇总: 1. 你如何理解 iOS 内存管理   1. new alloc copy retain这些对象我们都要主动的release或者 autorelease   2. 如果是类方法创建的 ...

  2. [Unity游戏开发]向量在游戏开发中的应用（二）

    本文已同步发表在CSDN:http://blog.csdn.net/wenxin2011/article/details/50972976 在上一篇博客中讲了利用向量方向的性质来解决问题.这篇博客将继 ...

  3. 优化临时表使用，SQL语句性能提升100倍

    [问题现象] 线上mysql数据库爆出一个慢查询,DBA观察发现,查询时服务器IO飙升,IO占用率达到100%, 执行时间长达7s左右.SQL语句如下:SELECT DISTINCT g.*, cp. ...

  4. Undefined class constant 'MYSQL_ATTR_INIT_COMMAND'

    新下载的php3.23,本地访问数据库可以,服务器上不行.如下: :( Undefined class constant 'MYSQL_ATTR_INIT_COMMAND' 错误位置 FILE: /u ...

  5. 解决UDT中内存下不去的问题

         使用UDT库,编写简单的网络通信程序,发现了一个问题,关闭一部分连接后,程序占用内存并没有变化.      比如先连接500个,再连接另500个,先关掉后面500个,程序占用内存降一半,再关 ...

  6. [经验]Textbox 做日志记录，

    private void Log(string msg) { txtLog.MaxLength = ; txtLog.AppendText(msg); } 起因:在Winform中用Textbox显示 ...

  7. 【java开发】数组基本学习

    一维数组 定义:具有相同数据类型的一组数据. 声明:int []a=new int[3];    释义:该数组的数据类型为int型,该数组长度为3,有3个元素 可采用如下方式为元素赋值:a[0]=1; ...

  8. EF 数据库连接字符串-集成安全性访问 SQL Server

    使用 Windows 集成安全性访问 SQL Server 如果您的应用程序运行在基于 Windows 的 Intranet 上,则也许可以将 Windows 集成身份验证用于数据库访问.集成安全性使 ...

  9. linux学习（2）

    自从安装了虚拟机和各种工具软件之后,学习Linux的过程不断被打断,一直想把Ubuntu烧录到itop4412开发板里面去,却总是失败,感觉这个过程都加强我的抗打击能力了,现在来说说,对于一个第一次烧 ...

  10. hdu-5988 Coding Contest(费用流)

    题目链接: Coding Contest Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (Java/Ot ...