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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
jquery 插件学习(三)
Aug 06 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 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中使用Oracle数据库(4)
2006/10/09 PHP
php文件系统处理方法小结
2016/05/23 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
python解决字符串倒序输出的问题
2018/06/25 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
python编写猜数字小游戏
2019/10/06 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
c++工程师面试问题
2013/08/04 面试题
活动策划邀请函
2014/02/06 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
学生期末评语大全
2014/04/30 职场文书
电气自动化求职信
2014/06/24 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
党员民主评议自我评价
2014/10/20 职场文书
销售员自我评价
2015/03/11 职场文书
干部培训工作总结2015
2015/05/25 职场文书
放牛班的春天观后感
2015/06/01 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
Python利用FlashText算法实现替换字符串
2022/03/31 Python