$scope与$rootScope的关系：
①不同的控制器之间 是无法直接共享数据
②$scope是$rootScope的子作用域对象
$scope的id是随着控制器的加载顺序依次递增，$rootScope的id是1

③不同控制器之间如何通信？？
1、借助于$rootScope
2、既然子作用域对象可以调用父作用域对象的值或者方法，就可以通过控制器之间的嵌套来实现通信
3、事件
父-》子
$scope.$broadcast('eventName',args)

子-》父
$scope.$emit('eventName',args)

绑定事件：
$scope.$on('eventName',func)

效果：

代码：

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

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

  <title></title>

</head>

<body>

<div ng-controller="parentCtrl">

  <button ng-click="toChild()">

    向child传值

  </button>

  <div ng-controller="childCtrl">

    <p>{{data}}</p>

    <button ng-click="toParent()">向parent传值</button>

  </div>

</div>

<script>

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

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

    $scope.toChild = function () {

      //通过事件传值 约定事件名称：toChildEvent

      $scope.$broadcast(

        'toChildEvent',

        ' msg from parent')

    }

    //绑定toParentEvent事件的处理函数

    $scope.$on('toParentEvent',

      function (event, result) {

        console.log(result);

      })

  });

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

    //绑定事件 $on

    $scope.$on('toChildEvent',

      function (event, result) {

        console.log(arguments);

        $scope.data = result;

      });

    $scope.toParent = function () {

      //向父级元素通过事件传值 $emit 约定:toParentEvent

      $scope.$emit(

        'toParentEvent',

        'msg to my parent'

      );

    }

  });

</script>

</body>

</html>

ng $scope与$rootScope的关系的更多相关文章

  1. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  2. angular : direative : scope | 指令scope和transclude的关系

    今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...

  3. AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系

    Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...

  4. Part 37 Difference between $scope and $rootScope

    In this video we will discuss the difference between $scope and $rootScope. The main difference is t ...

  5. Angular $scope和$rootScope

    <!DOCTYPE html><html ng-app='myModule'><head lang="en"> <meta charset ...

  6. AngularJs学习笔记5——自定义服务

    前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...

  7. (九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

    $injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...

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

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

  9. AngularJS的$rootScope和$scope联系和区别

    scope是html和单个controller之间的桥梁,数据绑定就靠他了. rootscope是各个controller中scope的桥梁.用rootscope定义的值,可以在各个controlle ...

随机推荐

  1. QQ空间动态内容，好友信息，点赞爬虫脚本

    一.安装基础的软件包: 1.准备好火狐浏览器,并下载geckodriver,将geckodriver加入到环境变量:下载geckodriver的地址:https://pan.baidu.com/s/1 ...

  2. python之路——MySQL数据库

    1 MySQL相关概念介绍 MySQL为关系型数据库(Relational Database Management System), 这种所谓的"关系型"可以理解为"表格 ...

  3. python进阶——进程/线程/协程

    1 python线程 python中Threading模块用于提供线程相关的操作,线程是应用程序中执行的最小单元. #!/usr/bin/env python # -*- coding:utf-8 - ...

  4. $python数据分析基础——初识numpy库

    numpy库是python的一个著名的科学计算库,本文是一个quickstart. 引入:计算BMI BMI = 体重(kg)/身高(m)^2 假如有如下几组体重和身高数据,让求每组数据的BMI值: ...

  5. FTP vsftp 安装、管理

    FTP简介 FTP是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为文传协议,用户Internet上的控制文件的双向传输. FTP的主要作用,就是让用户链接上一个远 ...

  6. 限制goroutine数量写法

    虽然golang的goroutine可以开启无数个goroutine,但是没有限制也是不行的.我就写一下我对goroutine数量限制的写法 1.初始化goroutine协程池.把goroutine数 ...

  7. fabric动态获取远程目录列表

    #!/usr/bin/pythonfrom fabric.api import *env.user='root'env.hosts=['172.10.224.183','172.10.224.132' ...

  8. spring security使用数据库验证的逻辑处理

    前面做了多个示例,包括使用jdbc和hibernate两种方式访问数据库获取用户信息和权限信息,其中一些关键步骤如下:   我们在SecurityConfig中配置覆盖configure方法时候,可以 ...

  9. LuManager升级php5.6.27方法

    LuManager自带的PHP在FastCGI模式是 5.2.17版,非FastCGI模式是 5.3.14版.由于360网盘的停服,已不敢再用那些免费的网盘,干脆自己搭个私有云.查了下相关资料准备先试 ...

  10. PAT1037. Magic Coupon (25)

    #include <iostream> #include <algorithm> #include <vector> using namespace std; in ...