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 parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
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
初学CAKEPHP 基础教程
2009/11/02 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Javascript 继承机制实例
2009/08/12 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python分支结构(switch)操作简介
2018/01/17 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
浅析Python requests 模块
2020/10/09 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
班主任师德师风自我剖析材料
2014/10/02 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS