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代码小结
Oct 14 Javascript
js事件(Event)知识整理
Oct 11 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
vue中实现动态生成二维码的方法
Feb 21 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简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
tab栏切换原理
2017/03/22 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
JavaScript实现前端倒计时效果
2021/02/09 Javascript
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
学习自我鉴定
2014/02/01 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
人生感悟经典句子
2019/08/20 职场文书
手残删除python之后的补救方法
2021/06/26 Python