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 相关文章推荐
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
layui--js控制switch的切换方法
Sep 03 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
神族 PROTOSS 概述
2020/03/14 星际争霸
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python常用数据分析模块原理解析
2020/07/20 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
PHP如何设置和取得Cookie值
2015/06/30 面试题
学院书画协会部门职责
2013/11/28 职场文书
最热门的自我评价
2013/12/30 职场文书
迎接领导欢迎词
2014/01/11 职场文书
2014年人事科工作总结
2014/11/19 职场文书
素质教育培训心得体会
2016/01/19 职场文书
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis