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 EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 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
Php header()函数语法及使用代码
2013/11/04 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Python接口自动化测试的实现
2020/08/28 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
教师自荐书
2013/10/08 职场文书
英语国培研修感言
2014/02/13 职场文书
文化宣传方案
2014/03/13 职场文书
项目经理聘任书
2014/03/29 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
模特大赛策划方案
2014/05/28 职场文书
2014年团支书工作总结
2014/11/14 职场文书
岳麓书院导游词
2015/02/03 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库