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 相关文章推荐
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
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
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python模块之paramiko实例代码
2018/01/31 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python机器学习之神经网络实现
2018/10/13 Python
Python 支付整合开发包的实现
2019/01/23 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
python游戏开发的五个案例分享
2020/03/09 Python
团工委书记自荐书范文
2013/12/17 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
精神文明建设标语
2014/06/16 职场文书
经济类毕业生求职信
2014/06/26 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
土建技术员岗位职责
2015/04/11 职场文书
劳动模范获奖感言
2015/07/31 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
python运算符之与用户交互
2022/04/13 Python