Angularjs的Controller间通信机制实例分析


Posted in Javascript onNovember 07, 2016

本文实例讲述了Angularjs的Controller间通信机制。分享给大家供大家参考,具体如下:

在Angularjs开发一些经验总结中提到我们需要按照业务区分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需要在controller中通信,一般为比较简单的通信机制,告诉同伴controller我的某个你所关心的东西改变了,怎么办?如果你是一个javascript程序员你会很自然的想到异步回调响应式通信—事件机制(或消息机制)。对,这就是angularjs解决controller之间通信的机制,所推荐的唯一方式,简而言之这就是angular way。

Angularjs为在scope中为我们提供了冒泡和隧道机制,$broadcast会把事件广播给所有子controller,而$emit则会将事件冒泡传递给父controller,$on则是angularjs的事件注册函数,有了这一些我们就能很快的以angularjs的方式去解决angularjs controller之间的通信,代码如下:

View:

<div ng-app="app" ng-controller="parentCtr">
  <div ng-controller="childCtr1">name :
    <input ng-model="name" type="text" ng-change="change(name);" />
  </div>
  <div ng-controller="childCtr2">Ctr1 name:
    <input ng-model="ctr1Name" />
  </div>
</div>

Controller:

angular.module("app", []).controller("parentCtr",
function ($scope) {
  $scope.$on("Ctr1NameChange",
  function (event, msg) {
    console.log("parent", msg);
    $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
  });
}).controller("childCtr1", function ($scope) {
  $scope.change = function (name) {
    console.log("childCtr1", name);
    $scope.$emit("Ctr1NameChange", name);
  };
}).controller("childCtr2", function ($scope) {
  $scope.$on("Ctr1NameChangeFromParrent",
  function (event, msg) {
    console.log("childCtr2", msg);
    $scope.ctr1Name = msg;
  });
});

这里childCtr1的name改变会以冒泡传递给父controller,而父controller会对事件包装在广播给所有子controller,而childCtr2则注册了change事件,并改变自己。注意父controller在广播时候一定要改变事件name

jsfiddle链接:http://jsfiddle.net/whitewolf/5JBA7/15/

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
jquery组件WebUploader文件上传用法详解
Oct 23 #Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 #Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 #Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 #Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 #Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 #Javascript
jQuery插件WebUploader实现文件上传
Nov 07 #Javascript
You might like
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
Javascript拓展String方法小结
2013/07/08 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
Python入门篇之正则表达式
2014/10/20 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
python中偏函数partial用法实例分析
2015/07/08 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
django输出html内容的实例
2018/05/27 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python hashlib模块的使用示例
2020/10/09 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
小学开学典礼主持词
2014/03/19 职场文书
超市活动计划书
2014/04/24 职场文书
学校献爱心活动总结
2014/07/08 职场文书
运动会广播稿100字
2014/09/14 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL