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

一、使用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. IOS 截取图片 部分 并生成新图片

    /** * 从图片中按指定的位置大小截取图片的一部分 * * @param image UIImage image 原始的图片 * @param rect CGRect rect 要截取的区域 * * ...

  2. mkforsela

    -- #!/bin/bash #sela.gao # #History: # .根据每行查找出来的结果push进去手机 #result: # :没有编译生成文件 # :没有设置编译环境 echoMsg ...

  3. PowerShell脚本自动设置安卓手机wifi代理

    在实际测试工作中,经常要将安卓手机通过wifi代理的形式连接到本机的fiddler或charles服务器代理进行抓包测试.最近一直在想,有没有什么方法可以自动设置安卓手机的wifi代理,曾经想通过修改 ...

  4. 函数动态参数实现format

    变量赋值一种是字符串格式化,一种是通过format的方式 1.字符串格式化 s="i am %s,age %d"%('Jasper',23)print(s) 打印输出:i am J ...

  5. 逻辑回归算法的原理及实现(LR)

    Logistic回归虽然名字叫"回归" ,但却是一种分类学习方法.使用场景大概有两个:第一用来预测,第二寻找因变量的影响因素.逻辑回归(Logistic Regression, L ...

  6. printf(),类型修饰符

    %s, 将输出作为字符串,要一直找到结束符'\0',这样在内存访问中,如果访问的是char 类型的,就会出现,从起始位置一直访问把整个申请的内存空间都遍历没有找到'\0',就会出现segment fa ...

  7. getopt()和getopt_long()用法

    参考链接: http://home.eeworld.com.cn/home.php?mod=space&do=blog&id=43897&uid=101752 http://b ...

  8. 通过js引用外部脚本（嘿嘿，方便直接在浏览器上调试抓取代码）

    最近折腾爬虫,后端使用jQuery进行数据采集,一般都是先从浏览器中将采集代码调试好后直接放到后端跑了. 有些网址没有引用jQuery,那调试起来就不方便了,可以用以下代码动态添加script标签,将 ...

  9. Javascript学习笔记：闭包题解（2）

    代码: var name='The Window'; var object={ name:'My Object', getNameFunc:function(){ return function(){ ...

  10. K－means算法

    K-means算法很简单,它属于无监督学习算法中的聚类算法中的一种方法吧,利用欧式距离进行聚合啦. 解决的问题如图所示哈:有一堆没有标签的训练样本,并且它们可以潜在地分为K类,我们怎么把它们划分呢?  ...