刚刚看了网上的一些关于控制器之间的通信;然后结合自己项目做了一些,这里主要做的是二个同级之间的controller通信。

Html:

 <html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>
<div ng-app="app">
<div ng-controller="childCtr1">name :
<input ng-model="name" type="text" />
</div>
<div ng-controller="childCtr2">Ctr1 name:
{{ctr1Name}}
</div>
</div>
</body>
</html>

上面的html代码设置了2个同级的控制器,现在childCtr2需要childCtr1的参数来显示相关信息,下面是控制器childCtr1的代码:

 angular.module("app", [])
.controller("childCtr1", function ($scope) {
$scope.$watch("name",function (){//监听绑定“name",当发生改变时发送消息;
//alert("123");
$scope.$emit("Ctr1NameChange", $scope.name);//发送名为Ctr1NameChange的消息,值为$scope.name
});
});

下面是childCtr2的代码:

angular.module("app", [])
.controller("childCtr2", function ($scope) {
$scope.$on("Ctr1NameChange",//监听有没有名为”Ctr1NameChange“的消息,如果有,则执行下面函数 function (event, msg) {
console.log("childCtr2", msg);
$scope.ctr1Name = msg;
});
});

以上是针对控制器分离的文件写的不同形式;当然也可以将他们合并到一个页面

 angular.module("app", [])
.controller("childCtr1", function ($scope) {
$scope.$watch("name",function (){
//alert("123");
$scope.$emit("Ctr1NameChange", $scope.name);
});
}).controller("childCtr2", function ($scope) {
$scope.$on("Ctr1NameChange", function (event, msg) {
console.log("childCtr2", msg);
$scope.ctr1Name = msg;
});
});

还有很多控制器之间的通信方法,包括server的factory,可以参考:http://jsbin.com/hopazo/5/edit?html,css,js,output

Angularjs controller之间的通信的更多相关文章

  1. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  2. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  3. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  4. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  5. Angularjs Controller 间通信机制

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

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

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

  7. angularJS中directive与directive 之间的通信

    上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...

  8. angularJS的controller之间如何正确的通信

    AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...

  9. angularJS项目-ajax事件的按钮loading和页面loading状态 & Controller之间通信-待续

    1).按钮loading --TODO 2). page loading状态 1.在module中注入指令 // Route State Load Spinner(used on page or co ...

随机推荐

  1. IE10以下优雅降级(作为范例)

    扒下来一段 优雅降级的代码. <!--[if lt IE 10]> <style> .ie-tip{margin-top: 100px;font-size: 16px;text ...

  2. web前端之css快速入门

    css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与 ...

  3. SpringMVC访问WEB-INF下的jsp的方法

    当输入localhost:8080/项目名 浏览器弹出不知道神马错误 The absolute uri: http://java.sun.com/jsp/jstl/core cannot be res ...

  4. 机器学习--boosting家族之Adaboost算法

    最近在系统研究集成学习,到Adaboost算法这块,一直不能理解,直到看到一篇博文,才有种豁然开朗的感觉,真的讲得特别好,原文地址是(http://blog.csdn.net/guyuealian/a ...

  5. 10-hdfs-hdfs搭建

    hdfs的优缺点比较: 架构图解分析: nameNode的主要任务: SNameNode的功能: (不是NN的备份, 主要用来合并fsimage) 合并流程: dataNode的主要功能: HDFS上 ...

  6. logback 日志打印输出

    slf4j 其实是一个日志的抽象层, 其本质仍然需要真正的实现 他可以解决代码中独立于任意特定的日志类库, 可以减少很多维护日志的麻烦, 除此之外, 还有占位符的特性, {}, 类似于String#f ...

  7. php的isset()和empty()区别

    转载:http://www.cnblogs.com/ndxsdhy/archive/2011/04/02/2003193.html 1.isset()函数 一般用来检测变量是否设置 (是否已经赋值) ...

  8. Vue前端框架面试问题

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答 ...

  9. [作业] Python入门基础--三级菜单

    用字典存储数据 可以随时返回上一级,随时退出程序 只能用循环判断等内置方法,不得导入模块 menu = { '广东':{ '广州':{ '越秀区':{ '面积':'33.80', '人口':'115万 ...

  10. 重置Root用户密码

    在忘记root用户密码是用于重置root用户密码: 1.开机按e. 2.在linux16开头的一行的末尾添加rd.break,按ctrl+x. 3.依次执行命令: mount -o remount,r ...