AngularJS进阶(九)控制器controller之间如何通信
AngularJS控制器controller之间如何通信
angular控制器通信的方式有三种:
1,利用作用域继承的方式。即子控制器继承父控制器中的内容
2,基于事件的方式。即$on,$emit,$boardcast这三种方式
3,服务方式。写一个服务的单例然后通过注入来使用
利用作用域的继承方式
由于作用域的继承是基于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: </p>
<button ng-click="move('Mos Eisley South')">Move</button>
<div ng-controller="Droid">
<p>Location: </p>
<button ng-click="sell('Owen Farm')">Sell</button>
</div>
基于事件的方式
在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式。基于事件的方式中我们可以利用$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的作用域触发事件, $boardcast表示向子级以下的作用域广播事件。
angular服务的方式
在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。
var app = angular.module('myApp', []);
//使用factory API创建服务instance
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>
AngularJS进阶(九)控制器controller之间如何通信的更多相关文章
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...
- angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...
- AngularJS 中 Controller 之间的通信
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...
- Angularjs controller之间的通信
刚刚看了网上的一些关于控制器之间的通信:然后结合自己项目做了一些,这里主要做的是二个同级之间的controller通信. Html: <html> <script src=" ...
- angularjs探秘<三> 控制器controller及angular项目结构
先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
- angularJS的controller之间如何正确的通信
AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...
- angularjs中控制器之间的通信----$on、$emit和$broadcast解析
$on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadca ...
- angular开发控制器之间的通信
一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...
随机推荐
- ROS(indigo)ROSPlan框架
源码地址:https://github.com/KCL-Planning/ROSPlan/wiki ROSPlan框架 ROSPlan框架提供了用于在ROS的系统任务规划的通用方法.ROSPlan的两 ...
- “出错了”和报告Bug的艺术
"出错了." 没有那句话能像"出错了"一样让程序员/开发者如此沮丧,心里翻江倒海,怒火一点即燃,还要死掉一大片脑细胞. 这句生硬的开场白通常标志着让开发者恐惧的 ...
- [lua]luasocket.c:20:17: fatal error: lua.h: No such file or directory
安装luasocket的时候出现了如下的错误 问题 $ tar xzf luasocket-2.0.2.tar.gz $ cd luasocket-2.0.2 $ $ make cd src; mak ...
- linux下的清屏命令
Linux下有两个清屏命令: clear 这个命令将会刷新屏幕,系统的操作是让终端显示页向后翻了一页,如果向上滚动屏幕还可以看到之前的操作信息.一般都会使用这个命令. reset 这个命令将完全刷新终 ...
- ubuntu mysql表名大小写区分
近期开发线上操作系统用的ubuntu,数据库用的mysql,突然发现mysql表名大写报错,找一下原因,看了下mysql的配置,果真可以设置,窃喜. 先找到你MySQL的my.cnf配置文件并修改,当 ...
- (NO.00005)iOS实现炸弹人游戏(八):游戏主角(一)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 最近一直在做另一个RPG游戏,所以本系列迟迟没有更新,上一篇博 ...
- HMM:隐马尔可夫模型HMM
http://blog.csdn.net/pipisorry/article/details/50722178 隐马尔可夫模型 隐马尔可夫模型(Hidden Markov Model,HMM)是统计模 ...
- 【UNIX网络编程第三版】阅读笔记(一):代码环境搭建
粗略的阅读过<TCP/IP详解>和<计算机网络(第五版)>后,开始啃这本<UNIX网络编程卷一:套接字联网API>,目前linux下的编程不算太了解,在阅读的过程中 ...
- 汉字转拼音的Oracle函数
前言: 最近处理一个特殊的问题,需要用到汉字自动转换拼音的功能. 解决: 在这里找了不少资料,都是有所缺陷,而且也好像很绕.其实是一个很简单的东东.后来还是自己写了一个函数获取.分享出来,给有需要的X ...
- Dynamics CRM 2013 停用和激活按钮的显示与隐藏
CRM中命令栏上的有些按钮是可以通过权限控制显示和隐藏的,比如新建.保存.保存并关闭.删除等,但惟独激活和停用无法控制,但我们还是可以用权限去控制,只是稍微绕了那么一下. 这里就要涉及到按钮的自定义了 ...