AngularJS实战之Controller之间的通信

柳絮飞祭奠

浏览: 167381 次
性别:
来自: 重庆

最近访客更多访客>>

xx5333

henxingliwang

lxin410

horsehome

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Angularjs实战
浏览量：19992

文章分类

社区版块

存档分类

博客分类：

AngularJS

AngularJS Controller

我们时常会在不同controller之间进行通信，接下来就介绍三种controller之间的通信方式

一、使用$on、$emit和$broadcast进行controller通信
虽然AngularJS是不推荐使用嵌套controller的使用，但是会有场景使用到父子controller传值的情况
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
$emit：子传父传递event与data
$broadcast：父传子 child controller传递event与data
$on：监听或接收数据。。用于接收event与data
例子：

<body>
	<div ng-controller="parentController">
		<div ng-click="parent_onclick()" style="background-color: green;">我是父亲{{parent}}</div>
		<div ng-controller="childController">
			<div ng-click="child_onclick()" style="background-color: red;">我是子集{{child}}</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../plugins/angular/angular.js"></script>
<script type="text/javascript">
	var lxApp = angular.module("lxApp", []);
	lxApp.controller("parentController", function($scope) {
			$scope.$on("sendParent", function(event, data) {
				$scope.parent = data;
			});
		$scope.parent_onclick = function() {
			$scope.$broadcast('sendChild', '我给子控制器传递数据');
		};
	}).controller("childController", function($scope) {
		$scope.$on("sendChild", function(event, data) {
			$scope.child = data;
		});
		$scope.child_onclick = function() {
			$scope.$emit('sendParent', '我给父级传递数据');

		};
	});
</script>

你会发现点击父级的div会使用$scope.$broadcast传递'sendChild'到子集，子集也会使用$on来监听父级传递的值。熟悉一下即可使用这种传值方式。

二、使用SERVICES（服务）来实现值的传递

我们首先来创建一个module（模块）
var lxApp = angular.module("lxApp", []);

接下来创建一个新的服务，服务里面定义一个鱼的数组，然后在使用addFish 方法添加鱼

lxApp.service('lxAppService', function($rootScope) {
		var service = {
			fishs : [ {
				title : "鲨鱼",
				area : "sea"
			}, {
				title : "鲸鱼",
				area : "sea"
			} ],
			addFish : function(fish) {
				service.fishs .push(fish);
			}
		};
		return service;
	});

接下来是controller和html的创建

<div ng-controller="parentController">
		<div ng-click="parent_onclick()" style="background-color: green;">我要向大海添加鱼</div>
		<div ng-controller="childController">
			<div ng-click="child_onclick()" style="background-color: red;">我要获得鱼</div>
		</div>
	</div>

 lxApp.controller("parentController", function($scope,lxAppService) {
		$scope.parent_onclick = function() {
			lxAppService.addFish({
				title : "海豚",
				area : "sea"
			} );
			alert(lxAppService.fishs);
		};
	}).controller("childController", function($scope,lxAppService) {
		$scope.child_onclick = function() {
			alert(angular.toJson(lxAppService.fishs));

		};
	});

展示点击父级的div调用父作用域的方法添加鱼，点击子集调用子集作用域的方法获得鱼

三、使用作用域进行controller的通信
div：

<div ng-controller="parentController">
		<div  style="background-color: green;">我是父级</div>
		<div ng-controller="childController">
			<div ng-click="child_onclick()" style="background-color: red;">我是获得父级的名字</div>
		</div>
	</div>

controller：

 lxApp.controller("parentController", function($scope) {
			$scope.name="1212";
	}).controller("childController", function($scope,$rootScope) {
		$scope.child_onclick = function() {
			alert($scope.name);

		};
	});

效果

这里我们会看到在父级定义的name在子集里面也可以获取到，这是AngularJS作用域机制，当我们调用子集的方法打印$scope.name,这时候会一直往父级向上的作用域中到$rootScope找name，所以这时候会打印出name。
最后就是可以使用根作用域$rootScope来获取不同controller的值。

AngularJS监听数组变化

AngularJS的$location基本用法和注意事项

AngularJS 无限滚动加载数据控件 ngInfiniteScroll

AngularJS实战之ng-repeat的详细用法

ng-show和ng-if的区别和使用场景

AngularJS实战之路由ui-view传参

AngularJS实战之filter的使用二

AngularJS实战之filter的使用一

AngularJS实战之路由ui-view

查看图片附件

0
顶

0
踩

分享到：

js实现百度搜索框滑动固定顶部 | Jquery获取选中的文本值

2017-10-22 23:13
浏览 1402
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

win7修复本地系统工具: win7修复本地系统工具

《自动化专业英语》04-Automatic-Detection-Block(自动检测模块).ppt: 《自动化专业英语》04-Automatic-Detection-Block(自动检测模块).ppt

《计算机专业英语》chapter12-Intelligent-Transportation.ppt: 《计算机专业英语》chapter12-Intelligent-Transportation.ppt

西门子S7-1200博图平台下3轴伺服螺丝机程序解析与应用: 内容概要：本文详细介绍了基于西门子S7-1200博图平台的3轴伺服螺丝机程序。该程序使用SCL语言编写，结合KTP700组态和TIA V14及以上版本，实现了对X、Y、Z三个轴的精密控制。文章首先概述了程序的整体架构，强调了其在自动化控制领域的高参考价值。接着深入探讨了关键代码片段，如轴初始化、运动控制以及主程序的设计思路。此外，还展示了如何通过KTP700组态实现人机交互，并分享了一些实用的操作技巧和技术细节，如状态机设计、HMI交互、异常处理等。适用人群：从事自动化控制系统开发的技术人员，尤其是对西门子PLC编程感兴趣的工程师。使用场景及目标：适用于希望深入了解西门子S7-1200博图平台及其SCL语言编程特点的学习者；旨在帮助读者掌握3轴伺服系统的具体实现方法，提高实际项目中的编程能力。其他说明：文中提供的代码示例和设计理念不仅有助于理解和学习，还能直接应用于类似的实际工程项目中。

MATLAB仿真：非线性滤波器在水下长基线定位(LBL)系统的应用与比较: 内容概要：本文详细探讨了五种非线性滤波器（卡尔曼滤波(KF)、扩展卡尔曼滤波(EKF)、无迹卡尔曼滤波(UKF)、粒子滤波(PF)和变维卡尔曼滤波(VDKF)）在水下长基线定位（LBL）系统中的应用。通过对每种滤波器的具体实现进行MATLAB代码展示，分析了它们在不同条件下的优缺点。例如，KF适用于线性系统但在非线性环境中失效；EKF通过雅可比矩阵线性化处理非线性问题，但在剧烈机动时表现不佳；UKF利用sigma点处理非线性，精度较高但计算量大；PF采用蒙特卡罗方法，鲁棒性强但计算耗时；VDKF能够动态调整状态维度，适合信标数量变化的场景。适合人群：从事水下机器人(AUV)导航研究的技术人员、研究生以及对非线性滤波感兴趣的科研工作者。使用场景及目标：①理解各种非线性滤波器的工作原理及其在水下定位中的具体应用；②评估不同滤波器在特定条件下的性能，以便为实际项目选择合适的滤波器；③掌握MATLAB实现非线性滤波器的方法和技术。其他说明：文中提供了详细的MATLAB代码片段，帮助读者更好地理解和实现这些滤波器。此外，还讨论了数值稳定性问题和一些实用技巧，如Cholesky分解失败的处理方法。

VMware-workstation-full-14.1.3-9474260: VMware-workstation-full-14.1.3-9474260

DeepSeek系列-提示词工程和落地场景.pdf: DeepSeek系列-提示词工程和落地场景.pdf

javaSE阶段面试题: javaSE阶段面试题

《综合布线施工技术》第5章-综合布线工程测试.ppt: 《综合布线施工技术》第5章-综合布线工程测试.ppt

安川机器人NX100使用说明书.pdf: 安川机器人NX100使用说明书.pdf

S7-1200 PLC改造M7120平面磨床电气控制系统：IO分配、梯形图设计及组态画面实现: 内容概要：本文详细介绍了将M7120型平面磨床的传统继电器控制系统升级为基于西门子S7-1200 PLC的自动化控制系统的过程。主要内容涵盖IO分配、梯形图设计和组态画面实现。通过合理的IO分配，确保了系统的可靠性和可维护性；梯形图设计实现了主控制逻辑、砂轮升降控制和报警逻辑等功能；组态画面则提供了友好的人机交互界面，便于操作和监控。此次改造显著提高了设备的自动化水平、运行效率和可靠性，降低了维护成本。适合人群：从事工业自动化领域的工程师和技术人员，尤其是熟悉PLC编程和控制系统设计的专业人士。使用场景及目标：适用于需要进行老旧设备升级改造的企业，旨在提高生产设备的自动化水平和可靠性，降低故障率和维护成本。具体应用场景包括但不限于金属加工行业中的平面磨床等设备的控制系统改造。其他说明：文中还分享了一些实际调试中的经验和技巧，如急停逻辑的设计、信号抖动的处理方法等，有助于读者在类似项目中借鉴和应用。

chromedriver-linux64-136.0.7103.48.zip: chromedriver-linux64-136.0.7103.48.zip

IMG_20250421_180507.jpg: IMG_20250421_180507.jpg

《网络营销策划实务》项目一-网络营销策划认知.ppt: 《网络营销策划实务》项目一-网络营销策划认知.ppt

Lianantech_Security-Vulnerabil_1744433229.zip: Lianantech_Security-Vulnerabil_1744433229

MybatisCodeHelperNew2019.1-2023.1-3.4.1.zip: MybatisCodeHelperNew2019.1-2023.1-3.4.1

《Approaching(Almost)any machine learning problem》中文版第13章（最后一章）: 【深度学习部署】基于Docker的BERT模型训练与API服务部署：实现代码复用与模型共享

火车票订票系统设计与实现(代码+数据库+LW): 摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装火车票订票系统软件来发挥其高效地信息处理的作用，可以规范信息管理流程，让管理工作可以系统化和程序化，同时，火车票订票系统的有效运用可以帮助管理人员准确快速地处理信息。火车票订票系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现火车票订票系统的功能。其中管理员管理用户，新闻公告。火车票订票系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，火车票订票系统都可以轻松应对。关键词：火车票订票系统；SpringBoot框架，系统分析，数据库设计

【ABB机器人】-00标准保养简介.pdf: 【ABB机器人】-00标准保养简介.pdf

最新校园跑腿小程序源码多校版本多模块适合跑腿外卖表白二手快递等校园服务.zip: 最新校园跑腿小程序源码多校版本，多模块，适合跑腿，外卖，表白，二手，快递等校园服务此版本为独立版本，不需要微擎直接放入就可以需要自己准备好后台的服务器，已认证的小程序，备案的域名!

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论