Angularjs controller之间的通信
刚刚看了网上的一些关于控制器之间的通信；然后结合自己项目做了一些，这里主要做的是二个同级之间的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之间的通信的更多相关文章
- AngularJS进阶(九)控制器controller之间如何通信
AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...
- AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS 中 Controller 之间的通信
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...
- Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...
- angularJS的controller之间如何正确的通信
AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...
- angularJS项目-ajax事件的按钮loading和页面loading状态 & Controller之间通信-待续
1).按钮loading --TODO 2). page loading状态 1.在module中注入指令 // Route State Load Spinner(used on page or co ...
随机推荐
- (转)python学习笔记4--数字类型与操作符
原文:https://blog.csdn.net/lemonwyc/article/details/37558269 1. 同时赋值(Simultaneous Assignments) python支 ...
- 腾讯云域名申请+ssl证书申请+springboot配置https
阿里云域名申请 域名申请比较简单,使用微信注册阿里云账号并登陆,点击产品,选择域名注册 输入你想注册的域名 进入域名购买页面,搜索可用的后缀及价格,越热门的后缀(.com,.cn)越贵一般,并且很可能 ...
- Java学习之路(十二)：IO流<三>
复习:序列流 序列流可以把多个字节输入整合成一个,从序列流中读取到数据时,将从被整合的第一个流开始读取,读完这个后,然后开始读取第二个流,依次向后推. 详细见上一篇文章 ByteArrayOutput ...
- Tomcat改端口号;修改访问路径,以及配置Context 标签以后Tomcat启动不了
修改tomcat端口号: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout=&qu ...
- Android 开发工具类 31_WebService 获取手机号码归属地
AndroidInteractWithWebService.xml <?xml version="1.0" encoding="utf-8"?> & ...
- RR和RC复合语句加锁
mysql版本:5.7 RR复合语句: insert/update/delete+select,+号左边是影响数据的排他锁,+号右边是查询(当前读,其实相当于lock in share mode)到数 ...
- 把AspDotNetCoreMvc程序运行在Docker上-part3：使用独立的存储容器
接上一篇博文<把AspDotNetCoreMvc程序运行在Docker上-part2:修改容器以及发布镜像>,这次我们看看如何使用docker存储数据. 背景 之前的示例都只有一个网站应用 ...
- Winform无边框窗体拖动
调用示例 当然,BUG还是有的,不过基本需求倒也可以
- PL/SQL Developer图形化窗口创建数据库（表空间和用户）以及相关查询sql
前言:上一篇安装好oracle和pl/sql后,这篇主要讲如何创建数据库,因为接下来我的项目会连接数据库进行开发. 第一步.先用系统管理员登录pl/sql 我这里系统管理员用户名为system,密码为 ...
- Q：链表的倒数第K个元素
问题:如何得到链表中的倒数第k个元素? 一种简单的思路是遍历链表一遍,并统计出链表中节点的数目,然后计算出倒数第k个元素到链表头节点的元素的距离,然后得到对应的结果.但是,我们能否有一种更加简便的 ...