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

一、使用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. poj2485 kruskal与prim

    Kruskal: #include<iostream> #include<cstdio> #include<algorithm> using namespace s ...

  2. Java SE 简介 & 环境变量的配置

    Java SE 简介 & 环境变量的配置 一.Java 技术的三个方向 Java 技术分为三个方向 javaSE( Java Platform Standard Edition 标准版)用来开 ...

  3. Android 大图片预览ViewPager

    项目gitHub地址:  https://github.com/bm-x/PhotoView 个人项目gitHub地址:  https://github.com/anan03/ananwork/tre ...

  4. linux ‘|’ 与重定向 实例详解

    重定向与管道 ----------小命令大作为 >:重定向标准输入出定向命令 用的最多的就是向某个文件中写入内容 [root@localhost ~]# echo "Hello,wor ...

  5. ReportService未指定 OverwriteDataSources

    报表服务器部署好之后,查看报表就显示ConnectionString 属性尚未初始化. 然后重启部署并查看部署时控制台的输出信息,发现之前的部署成功消息是假象,实际上部署的时候有一个警告: 不能将数据 ...

  6. jquery 设置页面元素不可点击、不可编辑、只读（备忘）

    $("input").attr('readonly', true); $("textarea").attr('readonly', true); $(':rad ...

  7. NPOI分层导出

    using NPOI.HSSF.UserModel; using NPOI.POIFS.FileSystem; using org.in2bits.MyXls; using System; using ...

  8. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  9. linux的三种安装软件包的方式（小白的学习之旅）

    tar包,整个安装过程可以分为以下几步: 1) 取得应用软件:通过下载.购买光盘的方法获得: 2) 解压缩文件:一般tar包,都会再做一次压缩,如gzip.bz2等,所以你需要先解压.如果是最常见的g ...

  10. Java动态代理与Cglib库

    JDK动态代理 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在 ...