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 相关文章推荐
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
js子页面获取父页面数据示例
May 15 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
区分vue-router的hash和history模式
Oct 03 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
php购物网站支付paypal使用方法
2010/11/28 PHP
Javascript Global对象
2009/08/13 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
vue2.x数组劫持原理的实现
2020/04/19 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Python中的is和id用法分析
2015/01/26 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
浅谈Python中数据解析
2015/05/05 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python写程序统计词频的方法
2019/07/29 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
python重要函数eval多种用法解析
2020/01/14 Python
Python实现井字棋小游戏
2020/03/09 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
大学生毕业求职信
2014/06/12 职场文书
PHP控制循环操作的时间
2021/04/01 PHP