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 实现表单验证功能代码(简洁)
Jul 03 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 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
php图片验证码代码
2008/03/27 PHP
php socket方式提交的post详解
2008/07/19 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php身份证号码检查类实例
2015/06/18 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Python 文件操作实现代码
2009/10/07 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
python读取文件名并改名字的实例
2019/01/07 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
用python批量移动文件
2021/01/14 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
医学院四年学习生活的自我评价
2013/11/06 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
和平主题的演讲稿
2014/01/12 职场文书
运动会广播稿100字
2014/09/14 职场文书
人事专员岗位职责
2015/02/03 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js