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

一、使用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. Java RandomAccessFile用法

    RandomAccessFile RandomAccessFile是用来访问那些保存数据记录的文件的,你就可以用seek( )方法来访问记录,并进行读写了.这些记录的大小不必相同:但是其大小和位置必须 ...

  2. java.sql.SQLException: ORA-00001: 违反唯一约束条件 (SCOTT.SYS_C0011456)

    我tb_user数据库的主键是id,在这个java程序中: String sql="insert into tb_user(id,USER_NAME,USER_PASSWORD) value ...

  3. [LeetCode_5] Longest Palindromic Substring

    LeetCode: 5. Longest Palindromic Substring class Solution { public: //动态规划算法 string longestPalindrom ...

  4. Netsuite > Hierarchy of transactions in Inventory cost calculation

    First in day worksheets + Purchase Transactions (Receipts, Bills, Adjustments, Assembly Builds) + Tr ...

  5. MVC的多表单

    中心思想就是在一个表单内不规定"action",在js里面用@Url.Axtion("视图层","控制器")方法来设置表单的传值. 控制器 ...

  6. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  7. RStudio中，出现中文乱码问题的解决方案

    RStudio中,出现中文乱码问题的解决方案解决步骤:1.设置RStudio文本显示的默认编码:RStudio菜单栏的Tools -> Global Options2.选择General -&g ...

  8. android Fragment 使用

    一 .Fragment的理解 Fragment 与activity 相似,但比activity 多出几个方法 ,Fragment的生命周期小于activity 一个Activity 中可以包含多个Fr ...

  9. Tomcat目录映射设置

    方法一: \conf\server.xml <Host>内插入<Context path="虚拟目录" docBase="文件目录" /> ...

  10. 5.Swift枚举|结构体|类|属性|方法|下标脚本|继承

    1. 枚举: ->在Swift中依然适用整数来标示枚举值,需搭配case关键字 enum  Celebrity{  case DongXie,XiDu,Nandi,BeiGai }  // 从左 ...