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（服务）来实现值的传递
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
AngularJS实战之Controller之间的通信的更多相关文章
- AngularJS进阶(九)控制器controller之间如何通信
AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS 中 Controller 之间的通信
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...
- Angularjs controller之间的通信
刚刚看了网上的一些关于控制器之间的通信:然后结合自己项目做了一些,这里主要做的是二个同级之间的controller通信. Html: <html> <script src=" ...
- angularjs 不同的controller之间值的传递
Sharing data between controllers in AngularJS I wrote this article to show how it can possible to pa ...
- angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...
- angularJS的controller之间如何正确的通信
AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...
- angularjs中控制器之间的通信----$on、$emit和$broadcast解析
$on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadca ...
- angularjs 中使用 service 在controller 之间 share 对象和数据
在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是创建一个servi ...
随机推荐
- shell条件控制和循环结构
一.简介 Shell编程中循环命令用于特定条件下决定某些语句重复执行的控制方式,有三种常用的循环语句:for.while和until.while循环和for循环属于“当型循环”,而until属于“直到 ...
- LINUX SSH修改默认22/添加端口
通常ssh远程登录的默认端口是22,但是因为端口22属于高危端口,因此很多时候作为服务器会被关掉,不过这个端口一般是可以更改或者添加的,这样除了22端口,也可以通过别的端口进行访问. 1.首先修改配置 ...
- 微信小程序中用setData修改一个对象的属性值
原创文章 1. Page({ data: { items:{ //items为一个对象,is_like和like分别为其两个属性 is_like: 0, like: 0 ...
- php新增的一些特性
php新增的特性,只是略微整理,并不完全. 一.php5.3添加的新特性 1.?:简化的三元运算符 <?php $cur = $cur ? $cur : 1; $cur = $cur ?: 1; ...
- 手机端适配iPhoneX
iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...
- Win7自带功能，刻录光盘遇到的问题
Win7系统的可以使用系统自带有光盘刻录功能来刻录光盘. 把一张空白光盘放入刻录机,打开“计算机”窗口,双击刻录机图标,弹出“刻录光盘”对话框,选择刻录类型.这里有两个选项:一个是“类似于USB闪存驱 ...
- Jenkins+svn+maven自动部署到tomcat
jenkins所在主机配置好,jdk,maven,Tomcat 1.配置maven,jdk环境 1) 进入配置界面--->[系统管理]--->[Global Tool Configurat ...
- poj 1182 (关系并查集) 食物链
题目传送门:http://poj.org/problem?id=1182 这是一道关系型并查集的题,对于每个动物来说,只有三种情况:同类,吃与被吃: 所以可以用0,1,2三个数字代表三种情况,在使用并 ...
- 关于nodejs 假设httpserver,会发现一次网页打开,服务端会响应两次的问题;
转自:http://cnodejs.org/topic/518772806d38277306804020 每个页面默认都会再发一个de style="line-height: 21px; p ...
- MySQL 索引 INDEX
索引用于快速找出在某列中有特定值的行. 不使用索引,MySQL必须从第一条记录开始读完整个表,直到找到相关的行,表越大,查询数据所花费的时间就越多,如果表中查询的列有一个索引,MySQL能够快速到达一 ...