angular 控制器之间的通信

川长思鸟来 2022-06-05 01:07 189阅读 0赞

1, 利用作用域的继承方式

由于作用域的继承是基于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>

2, 基于事件的方式

在一般情况下基于继承的方式已经足够满足大部分情况了，但是这种方式没有实现兄弟控制器之间的通信方式，所以引出了事件的方式 。基于事件的方式中我们可以里面作用的$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>

3, 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关【Angular知识点】通过服务实现组件之间的通信EventEmitter

场景：界面是由多个组件组成的，如果组件A中修改了数据内容，其他组件（与组件A中的数据有关联的）需要相应修改，那么就需要用到EventEmitter。第一步：创建服务文件：e

末蓝、/ 2024年02月19日 12:32/ 0 赞/ 40 阅读

相关 angular中控制器之间的传值该怎么实现?

作者：机智的布鲁斯链接：https://www.zhihu.com/question/34977234/answer/60731328 来源：知乎著作权归作者所

野性酷女/ 2022年08月23日 00:41/ 0 赞/ 152 阅读

相关 Fragment之间的通信

在本节中，你会学到 1、定义接口 2、实现接口 3、将消息传递给fragment 为了重用Fragment UI 组件，在设计中你应该通过定义每一个fragemnt自己

淡淡的烟草味﹌/ 2022年08月11日 16:38/ 0 赞/ 187 阅读

相关 Fragment之间的通信

在本节中，你会学到 1、定义接口 2、实现接口 3、将消息传递给fragment 为了重用Fragment UI组件，在设计中你应该通过定义每一个fragemnt自己的

喜欢ヅ旅行/ 2022年08月09日 09:24/ 0 赞/ 210 阅读

相关 tabbar视图控制器之间的切换

// // AppDelegate.m // tabbar // // Created by Wei Zheng on 17/8/8. // Copyrigh

旧城等待，/ 2022年06月09日 13:58/ 0 赞/ 167 阅读

相关 Angular 控制器之间的通信

<!DOCTYPE html> <html lang="en" ng-app ='App'> <head> <meta charset="UT

一时失言乱红尘/ 2022年06月06日 00:59/ 0 赞/ 163 阅读

相关 angular 控制器之间的通信

1, 利用作用域的继承方式由于作用域的继承是基于js的原型继承方式，所以这里分为两种情况，当作用域上面的值为基本类型的时候，修改父作用域上面的值会影响到子作用域，反之，修

川长思鸟来/ 2022年06月05日 01:07/ 0 赞/ 190 阅读

相关 angular 父子通信

xiaotou.component.ts import { Component,OnInit } from '@angular/core'; import {

港控/mmm°/ 2022年06月01日 04:24/ 0 赞/ 195 阅读

相关进程之间的通信

进程之间的通信: 进程是指运行中的程序，进程的任务就是执行程序中的代码，如下面程序EchoPlayer类是一个独立的java程序，他可以在任意一条安装了JDK的主机上

青旅半醒/ 2021年09月15日 08:00/ 0 赞/ 508 阅读

相关 angular中子控制器向父控制器传值

angular中子控制器向父控制器传值 ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] 子级指令app-sheet中，使

ゝ一世哀愁。/ 2021年09月11日 07:44/ 0 赞/ 359 阅读