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 ...
随机推荐
- django框架--视图系统
目录 一.视图函数的理解 二.视图函数的定位 三.请求对象HttpRequest 四.响应对象HttpResponse 一.视图函数的理解 视图函数的作用是,对指定的url执行业务逻辑,视图函数将会作 ...
- CSSREM
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 安装 下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入pac ...
- Spring Security构建Rest服务-0900-rememberMe记住我
Spring security记住我基本原理: 登录的时候,请求发送给过滤器UsernamePasswordAuthenticationFilter,当该过滤器认证成功后,会调用RememberMeS ...
- Maven-pom.xml文件报错 Plugin execution not covered by lifecycle configuration
问题: Eclipse中新导入的项目pom.xml文件报错: Plugin execution not covered by lifecycle configuration: org.jacoco:j ...
- 《css3揭秘》的效果code
1.在阅读css3揭秘的基础上,跟着书中的效果组合起来的这组代码. 2.代码中有四张图片分别是 1.jpg 2.jpg 3.jpg 4.jpg; 作为demo,图片名称没有语义. 3.兼容性: I ...
- CVPR2019 | Libra R-CNN 论文解读
作者 | 文永亮 学校 | 哈尔滨工业大学(深圳) 研究方向 | 目标检测.GAN 推荐理由 这是一篇发表于CVPR2019的paper,是浙江大学和香港中文大学的工作,这篇文章十分有趣,网友戏称 ...
- ARM的体系结构与编程系列博客——ARM体系变种
ARM体系变种的简介 有人会很奇怪一件事情,ARM居然会变种,不会是基因突变了吧,呵呵,其实ARM变种通俗一点来讲呢,就是ARM突然具备了一种特定的功能!并非是基因突变哦!ARM是reboot好不好? ...
- split函数和merge函数
split函数的主要功能是把一个彩色图像分割成3个通道,方便进一步的图像处理,具体说明如下: split Divides a multi-channel array into several sing ...
- MYSQL安装时解决要输入current root password的解决方法
在装MYSQL的时候发现要输入current root password不记得以前在电脑里装过(你的系统曾经装过MYSQL在重装就会要求输入原来设定的密码,如果是第一次安装就不会出现),在网上苦苦搜寻 ...
- rsyslog 配置 二
转自:https://www.cnblogs.com/cherishry/p/6775163.html rsyslog 配置 二 # rsyslog configuration file # For ...