先说最简单的，适合简单数据

一、使用controller as

<body ng-controller="ParentCtrl as parent">

    <input ng-model="parent.name" /> {{parent.name}}

    <div ng-controller="ChildCtrl as child">

      <input ng-model="child.name" /> {{child.name}} - {{parent.name}}

    </div>

</body>

这样parentCtrl中的数据也可以显示在嵌套在其中的childCtrl了

二、使用$rootScope 或 $parent

<body ng-controller="ParentCtrl">

    <input ng-model="name" /> {{name}}

    <div ng-controller="ChildCtrl">

        <input ng-model="name" /> {{name}} - {{$parent.name}}

    </div>

</body>

三、使用$broadcast，$emit和$on

  • 从上往下—— $broadcast 把事件广播给所有子controller
  • 从下往上—— $emit 将事件冒泡传递给父controller
  • $on     ——  angularjs的事件注册函数
<div ng-app="app" ng-controller="parentCtrl">

    <div ng-controller="childCtrl1">name :

        <input ng-model="name" type="text" ng-change="change(name);" />

    </div>

    <div ng-controller="childCtrl2">Ctr1 name:

        <input ng-model="ctrl1Name" />

    </div>

</div>
angular.module("app", []).controller("parentCtrl",function ($scope) {

    //注册Ctrl1NameChange事件

    $scope.$on("Ctrl1NameChange", function (event, msg) {

        console.log("parent", msg);

        $scope.$broadcast("Ctrl1NameChangeFromParent", msg);

    });

}).controller("childCtrl1", function ($scope) {

    $scope.change = function (name) {

        console.log("childCtrl1", name);
        //冒泡Ctrl1NameChange事件，将name传给父级controller

        $scope.$emit("Ctrl1NameChange", name);

    };

}).controller("childCtrl2", function ($scope) {

    //

    $scope.$on("Ctrl1NameChangeFromParent",function (event, msg) {

        console.log("childCtrl2", msg);

        $scope.ctrl1Name = msg;

    });

});

jsfiddle链接：http://jsfiddle.net/whitewolf/5JBA7/15/

参看：

  • http://www.cnblogs.com/whitewolf/archive/2013/04/16/3024843.html
  • http://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification

Angularjs Controller间通信的几种方法的更多相关文章

  1. vue-learning：31 - component - 组件间通信的6种方法

    vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...

  2. Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  3. 【转】Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  4. Linux下进程通信的八种方法

    Linux下进程通信的八种方法:管道(pipe),命名管道(FIFO),内存映射(mapped memeory),消息队列(message queue),共享内存(shared memory),信号量 ...

  5. Shell实现Unix进程间信息交换的几种方法

    本文将介绍在SCO OpenServer5.0.5系统中使用shell语言来实现进程间信息交换的几种方法: 使用命名管道实现进程间信息交换 使用kill命令和trap语句实现进程间信息交换 使用点命令 ...

  6. 去除inline-block元素间间距的N种方法-zhangxinxu

    张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...

  7. c#中实现串口通信的几种方法

    c#中实现串口通信的几种方法 通常,在C#中实现串口通信,我们有四种方法: 第一:通过MSCOMM控件这是最简单的,最方便的方法.可功能上很难做到控制自如,同时这个控件并不是系统本身所带,所以还得注册 ...

  8. UE4学习心得：蓝图间信息通信的几种方法

    蓝图间通信是一个复杂关卡能否正常运行的关键,笔者在这里提供几种蓝图类之间的信息交互方法,希望能对读者有所帮助. 1.类引用 这是最直接的一种蓝图类之间的信息交互方式.首先在Editor中创建2个Act ...

  9. 容器间通信的三种方式 - 每天5分钟玩转 Docker 容器技术（35）

    容器之间可通过 IP,Docker DNS Server 或 joined 容器三种方式通信. IP 通信 从上一节的例子可以得出这样一个结论:两个容器要能通信,必须要有属于同一个网络的网卡. 满足这 ...

随机推荐

  1. js实现控制日期月份增减

    定义一个当前日期变量 var myDate = new Date(); 处理月份添加函数(date当前日期,num增加的月份[正数:增加月份,负数:减少月份])function addMonth(da ...

  2. tmodjS

    1. 在安装好nodejs之后(-g全局)安装tmodejs 成功安装后如下: 2. 进入你要cmd进行打包的地方,配置好pakage.json 原来的目录结构如下: 3. 通过cmd进入当前的pub ...

  3. http协议梳理（个人学习用）

    HTTP默认的端口号为80,HTTPS的端口号为443. 在Internet中所有的传输都是通过TCP/IP进行的.HTTP协议作为TCP/IP模型中应用层的协议.HTTP协议通常承载于TCP协议之上 ...

  4. 两个NetSuite之间历史交易数据迁移的具体方案

    背景与展望: 比如:公司要上市往往会要求提供过去几年的营业数据和报表等信息, 而这些信息来源于正在一直运营使用的ERP和财务系统是最可靠与真实的. NetSuite实现的ERP和财务系统的完美结合,随 ...

  5. TCP重传率高的监控

    TCP重传率是对网络质量的一个体现,简单包装netstat -s的输出可以计算出TCP重传率.现成的脚本如下: #!/bin/bash export PATH='/bin:/sbin:/usr/bin ...

  6. DPI

    [iOS]查找数组NSArray中是否包含指定的元素 http://blog.csdn.net/zyq527758142/article/details/51278172 Dpi(每平方英寸像素数目) ...

  7. Win7下Doxygen配置与使用

    1.  下载与安装 1.1 下载 Doxygen官方安装程序及其手册下载地址,目前使用版本为1.8.8. 安装程序:http://www.stack.nl/~dimitri/doxygen/downl ...

  8. reactive-turtle

    reactive-turtle 标签(空格分隔): Scala Github 偶然在Github上看到一个有意思的小项目,一个粑粑教11岁的儿子学习scala,因为学习语法等太枯燥了,所以写了一个海龟 ...

  9. Analyzer中进行货币转换

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. s5pv210 cpu运行debian

    1.环境准备 sudo apt-get install binfmt-support qemu qemu-user-static debootstrap 2.获取debian根文件系统 2.1.cd ...