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学习3:操作元素属性和特性
Feb 07 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
bootstrap表单示例代码分享
May 18 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
js控制表单操作的常用代码小结
2013/08/15 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python只用40行代码编写的计算器实例
2017/05/10 Python
python图像常规操作
2017/11/11 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
合作投资意向书
2014/04/01 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014年采购工作总结
2014/11/20 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
SQL Server 中的事务介绍
2022/05/20 SQL Server
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL