我们时常会在不同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

例子：

  1. <body>
  2. 	<div ng-controller="parentController">
  3. 		<div ng-click="parent_onclick()" style="background-color: green;">我是父亲{{parent}}</div>
  4. 		<div ng-controller="childController">
  5. 			<div ng-click="child_onclick()" style="background-color: red;">我是子集{{child}}</div>
  6. 		</div>
  7. 	</div>
  8. </body>
  9. <script type="text/javascript" src="../plugins/angular/angular.js"></script>
  10. <script type="text/javascript">
  11. 	var lxApp = angular.module("lxApp", []);
  12. 	lxApp.controller("parentController", function($scope) {
  13. 			$scope.$on("sendParent", function(event, data) {
  14. 				$scope.parent = data;
  15. 			});
  16. 		$scope.parent_onclick = function() {
  17. 			$scope.$broadcast('sendChild', '我给子控制器传递数据');
  18. 		};
  19. 	}).controller("childController", function($scope) {
  20. 		$scope.$on("sendChild", function(event, data) {
  21. 			$scope.child = data;
  22. 		});
  23. 		$scope.child_onclick = function() {
  24. 			$scope.$emit('sendParent', '我给父级传递数据');
  25.  
  26. 		};
  27. 	});
  28. </script>

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





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



我们首先来创建一个module（模块）

var lxApp = angular.module("lxApp", []);

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

  1. lxApp.service('lxAppService', function($rootScope) {
  2. 		var service = {
  3. 			fishs : [ {
  4. 				title : "鲨鱼",
  5. 				area : "sea"
  6. 			}, {
  7. 				title : "鲸鱼",
  8. 				area : "sea"
  9. 			} ],
  10. 			addFish : function(fish) {
  11. 				service.fishs .push(fish);
  12. 			}
  13. 		};
  14. 		return service;
  15. 	});

接下来是controller和html的创建



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

  1.  lxApp.controller("parentController", function($scope,lxAppService) {
  2. 		$scope.parent_onclick = function() {
  3. 			lxAppService.addFish({
  4. 				title : "海豚",
  5. 				area : "sea"
  6. 			} );
  7. 			alert(lxAppService.fishs);
  8. 		};
  9. 	}).controller("childController", function($scope,lxAppService) {
  10. 		$scope.child_onclick = function() {
  11. 			alert(angular.toJson(lxAppService.fishs));
  12.  
  13. 		};
  14. 	});

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







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

div：

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

controller：

  1.  lxApp.controller("parentController", function($scope) {
  2. 			$scope.name="1212";
  3. 	}).controller("childController", function($scope,$rootScope) {
  4. 		$scope.child_onclick = function() {
  5. 			alert($scope.name);
  6.  
  7. 		};
  8. 	});

效果







这里我们会看到在父级定义的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

AngularJS实战之Controller之间的通信的更多相关文章

  1. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  2. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  3. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  4. Angularjs controller之间的通信

    刚刚看了网上的一些关于控制器之间的通信:然后结合自己项目做了一些,这里主要做的是二个同级之间的controller通信. Html: <html> <script src=" ...

  5. angularjs 不同的controller之间值的传递

    Sharing data between controllers in AngularJS I wrote this article to show how it can possible to pa ...

  6. angularJS中directive与directive 之间的通信

    上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...

  7. angularJS的controller之间如何正确的通信

    AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...

  8. angularjs中控制器之间的通信----$on、$emit和$broadcast解析

    $on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadca ...

  9. angularjs 中使用 service 在controller 之间 share 对象和数据

    在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是创建一个servi ...

随机推荐

  1. 31-mysql 代码建立数据库

    给个例子,模仿即可: drop database if exists tt; create database tt default character set utf8; use tt; create ...

  2. MYSQL分析慢查询

    mysql慢查询的日志文件路径一般为: /var/lib/mysql/slowquery.log,具体的路径可以通过mysql配置文件(/etc/my.cnf)查询,slow_query_log_fi ...

  3. 我的开发小tip

    开发原则:1.谁开发,谁负责到底.自己的开发的模块自己维护,不要让别人替你维护,否则很麻烦:2.合理分配时间3.谨慎的处理遇到的bug和问题,不是自己开发的不要轻举妄动,提交到待办中即可4.万勿过度设 ...

  4. 安装MySQL遇到的常见英文翻译

    安装MySQL遇到的常见英文翻译: choose this configuration type to create the optimal server setup for this machine ...

  5. 自己在完第一遍STL和Directx 9.0 游戏开发编程基础书后的体会

    如果一本书看一遍就能看懂,说明书对自己相对容易,没有必要在去看第二遍,但是对于大多数书籍,都有自己陌生的知识,看完一遍无法理解的地方,说明就是自己知识点最薄弱的,最需要去理解的地方,一旦自己理解了这些 ...

  6. 转::before和::after伪元素的用法

    一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-let ...

  7. C# 出现base-64 字符数组的无效长度的解决办法

    最近的一个项目,在传递参数时,在Win2003上正常,在Win7下抛出“base-64 字符数组的无效长度”这样的错误 对比了一下经过Convert.ToBase64String()转换过的参数发现, ...

  8. Mike and strings 798B

    B. Mike and strings time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. Eclipse安装和使用windowbuilder插件开发图形界面

    windowbuilder插件的安装 windowbuilder的官方网站:http://www.eclipse.org/windowbuilder/download.php 在Eclipse中 安装 ...

  10. 20180613更新 leetcode刷题

    最近就是忙工作项目 工作间隙就刷了刷LEETCODE 所以没啥更新 // 1111111.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #i ...