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

转载于:https://www.cnblogs.com/baryon/p/9611421.html

AngularJS实战之Controller之间的通信相关推荐

angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
Angularjs controller之间的通信
刚刚看了网上的一些关于控制器之间的通信:然后结合自己项目做了一些,这里主要做的是二个同级之间的controller通信. Html: 1 <html> 2 <script src=& ...
angularJS的controller之间如何正确的通信
AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...
《AngularJS实战》——3.1　模板中的过滤器
本节书摘来自华章出版社<AngularJS实战>一书中的第3章,第3.1节,作者:陶国荣,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.1 模板中的过滤 ...
多个 ng-app 中 Controllers Services 之间的通信
原文发布在个人独立博客上,链接:http://pengisgood.github.io/2016/01/31/communication-between-multiple-angular-apps/ ...
linux:进程之间的通信
ipc :进程间通信(InterProcess Communication) 1.管道同一时间是单向的:父读子写,或父写子读管道中的数据 ,读走就没了参数是一个整型数的数组,数组的大小是两个 ...
vue的父子组建之间的通信(-)，基于props和$emit之间的传递
对于vue而言,以为其核心思想为前端组建化.所以组建之间的通信必不可少. 相信接触过Angularjs的童鞋都知道angularjs的控制器之间的通信机制. 1:父传子:官方的$broadcast() ...
第十节：实现vue组件之间的通信
这一节我们还是来继续介绍组件:组件之间如何通信. 第九节我们在介绍组件知识的时候,提到过组件可以接受参数props,这其实就是组件之间的一种通信方式:父组件→子组件传递数据. 父组件→子组件那我们还 ...
《AngularJS实战》——3.2　过滤器的应用
本节书摘来自华章出版社<AngularJS实战>一书中的第3章,第3.2节,作者:陶国荣,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.2 过滤器的应用 ...

AngularJS实战之Controller之间的通信

AngularJS实战之Controller之间的通信相关推荐

最新文章

热门文章