AngularJS控制器之间的通信方式详解


Posted in Javascript onNovember 03, 2016

本文实例讲述了AngularJS控制器之间的通信方式。分享给大家供大家参考,具体如下:

一、利用作用域的继承方式

由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值;如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。

基本类型

function Sandcrawler($scope) {
  $scope.location = "Mos Eisley North";
  $scope.move = function(newLocation) {
    $scope.location = newLocation;
  }
}
function Droid($scope) {
  $scope.sell = function(newLocation) {
    $scope.location = newLocation;
  }
}

html:

<div ng-controller="Sandcrawler">
  <p>Location: {{location}}</p>
  <button ng-click="move('Mos Eisley South')">Move</button>
  <div ng-controller="Droid">
    <p>Location: {{location}}</p>
    <button ng-click="sell('Owen Farm')">Sell</button>
  </div>
</div>

对象

function Sandcrawler($scope) {
  $scope.obj = {location:"Mos Eisley North"};
}
function Droid($scope) {
  $scope.summon = function(newLocation) {
    $scope.obj.location = newLocation;
  }
}

html:

<div ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <div ng-controller="Droid">
    <button ng-click="summon('Owen Farm')">
      Summon Sandcrawler
    </button>
  </div>
</div>

二、基于事件的方式

在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式。基于事件的方式中我们可以里面作用的$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的作用域触发事件, $boardcast表示向子级以下的作用域广播事件。参照以下代码:

向上传播事件

function Sandcrawler($scope) {
  $scope.location = "Mos Eisley North";
  $scope.$on('summon', function(e, newLocation) {
    $scope.location = newLocation;
  });
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.summon = function() {
    $scope.$emit('summon', $scope.location);
  }
}

html:

<div ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <div ng-controller="Droid">
    <p>Droid Location: {{location}}</p>
    <button ng-click="summon()">Summon Sandcrawler</button>
  </div>
</div>

向下广播事件

function Sandcrawler($scope) {
  $scope.location = "Mos Eisley North";
  $scope.recall = function() {
    $scope.$broadcast('recall', $scope.location);
  }
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.$on('recall', function(e, newLocation) {
    $scope.location = newLocation;
  });
}

html:

<div ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <button ng-click="recall()">Recall Droids</button>
  <div ng-controller="Droid">
    <p>Droid Location: {{location}}</p>
  </div>
</div>

从这个用法我们可以引申出一种用于兄弟控制间进行通信的方法,首先我们一个兄弟控制中向父作用域触发一个事件,然后在父作用域中监听事件,再广播给子作用域,这样通过事件携带的参数,实现了数据经过父作用域,在兄弟作用域之间传播。这里要注意的是,通过父元素作为中介进行传递的话,兄弟元素用的事件名不能一样,否则会进入死循环。请看代码:

兄弟作用域之间传播

function Sandcrawler($scope) {
  $scope.$on('requestDroidRecall', function(e) {
    $scope.$broadcast('executeDroidRecall');
  });
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.recallAllDroids = function() {
    $scope.$emit('requestDroidRecall');
  }
  $scope.$on('executeDroidRecall', function() { 
    $scope.location = "Sandcrawler"
  });
}

html:

<div ng-controller="Sandcrawler">
  <div ng-controller="Droid">
    <h2>R2-D2</h2>
    <p>Droid Location: {{location}}</p>
    <button ng-click="recallAddDroids()">Recall All Droids</button>
  </div>
  <div ng-controller="Droid">
    <h2>C-3PO</h2>
    <p>Droid Location: {{status}}</p>
    <button ng-click="recallAddDroids()">Recall All Droids</button>
  </div>
</div>

三、angular服务的方式

在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个控制器中获取到修改后的值:

var app = angular.module('myApp', []);
app.factory('instance', function(){
  return {};
});
app.controller('MainCtrl', function($scope, instance) {
 $scope.change = function() {
    instance.name = $scope.test;
 };
});
app.controller('sideCtrl', function($scope, instance) {
  $scope.add = function() {
    $scope.name = instance.name;
  };
});

html:

<div ng-controller="MainCtrl">
   <input type="text" ng-model="test" />
   <div ng-click="change()">click me</div>
</div>
<div ng-controller="sideCtrl">
  <div ng-click="add()">my name {{name}}</div>
</div>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
js有关元素内容操作小结
Dec 20 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 #Javascript
AngularJS创建自定义指令的方法详解
Nov 03 #Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 #Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 #Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 #Javascript
jQuery下拉菜单的实现代码
Nov 03 #Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 #Javascript
You might like
一个简单计数器的源代码
2006/10/09 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PDO::rollBack讲解
2019/01/29 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
python多进程共享变量
2016/04/06 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Python 解析简单的XML数据
2020/07/24 Python
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
合作意向协议书范本
2014/03/31 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
分居协议书范本
2014/11/03 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
行政二审代理词
2015/05/25 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL