angularJS中controller的通信
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-app="bb">
<div ng-controller="abx">
<ul ng-repeat="names in name track by $index">
<li ng-bind="names.names"></li>
</ul>
<button ng-click="sub()">减</button>
<span ng-bind="remark"></span> {{remark}}
<hr>
<div ng-controller="aby">
<button ng-click="add()">加</button>
<span ng-bind="remark"></span> {{remark}}
</div>
</div>
<hr>
<hr>
<div ng-view></div>
</div>
</body>
<script src="Angular.js"></script>
<script src="route.js"></script>
<script>
var app= angular.module("bb",['ngRoute']);
app.controller("abx",function($rootScope,$scope){
$scope.name=[
{names:"123"},
{names:"456"},
{names:"789"},
];
$scope.remark=100;
$scope.$on("adds",function(event,data){
$scope.remark+=data;
});
$scope.$on("subs",function(event,data){
$scope.remark-=data;
});
$scope.sub = function(){
$scope.$broadcast("subs",10);//向下广播
};
}); app.controller("aby",function ($rootScope,$scope){
$scope.remark=100;
$scope.add=function(){
$scope.$emit("adds",10);//向上广播
};
$scope.$on("adds",function(event,data){
$scope.remark+=data;
});
$scope.$on("subs",function(event,data){
$scope.remark-=data;
});
});
//路由
app.config(function ($routeProvider) {
$routeProvider.when("/index",{
controller: 'otherOneCtrl',
templateUrl: 'templete/otherOne.html',
publicAccess: true
}).when("/index2",{
controller: 'otherTwoCtrl',
templateUrl: 'templete/otherTwo.html',
publicAccess: true
}).otherwise({
redirectTo: '/index'
});
}); app.controller("otherOneCtrl",function ($scope){
$scope.other="other1";
});
app.controller("otherTwoCtrl",function ($scope){
$scope.other="other2";
});
</script>
</html>
angularJS中controller的通信的更多相关文章
- AngularJS 中 Controller 之间的通信
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...
- Angularjs中controller的三种写法
在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中cont ...
- AngularJS中控制器之间通信方法
在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...
- angularJs 中controller与sever
网上找到的一个例子,感觉对于初学者理解将controller抽成服务有帮助.主要是方便理解什么时候应该来做服务. html部分 <!DOCTYPE html> <html ng-ap ...
- angularJs中$controller的使用
$controller的使用 参考:https://stackoverflow.com/questions/27866620/can-someone-provide-a-use-case-for-th ...
- Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...
随机推荐
- Robotium查找指定控件
一.通过ID查找控件 Activity act=solo.getCurrentActivity(): int id=act.getResources().getIdentifier("id名 ...
- c++ map删除元素
typedef std::map<std::string,float> StringFloatMap; StringFloatMap col1; StringFloatMap::itera ...
- APIO2015
还没有写完APIO2015的题目,打算今天写一写. T1: 按位DP,DP时要保证已确定的位为0. 前4组设f[n][k]表示把前n个分成k组是否合法. 最后一组设g[n]表示把前n个最少分为多少组才 ...
- get和post方法的区别
在form表单提交数据的过程中,method属性提供了两个值:get,post,默认为get方式[参1] 即一种为get提交,一种是post提交.那么这两种提交方式有什么不同呢? 查询了一些资料后,总 ...
- JS URL传中文参数引发的乱码问题
今天的项目中碰到了一个乱码问题,从JS里传URL到服务器,URL中有中文参数,服务器里读出的中文参数来的全是“?”,查了网上JS编码相关资料得以解决. 解决方法一: 1.在JS里对中文参数进行两次转码 ...
- Stack and Heap 堆和栈的区别
在和计算机内存打交道时,我们一定会碰到堆和栈,这两个东西很容易搞混,那么现在就来梳理一下二者的关系. 栈是用来静态分配内存的而堆是动态分配内存的,它们都是存在于计算机内存之中. 栈的分配是在程序编译的 ...
- 解决win7系统远程桌面 server 2003 卡的问题
原因在于从vista开始,微软在TCP/IP协议栈里新加了一个叫做“Window Auto-Tuning”的功能.这个功能本身的目的是为了让操作系统根据网络的实时性能(比如响应时间)来动态调整网络上传 ...
- FZU 2028 BFS+vector
一个普通的bfs 如果不看样例和input的解释... 四个0真是神样例 又被input误导 以为每个点都按顺序有标号 传送门的终点给的是一个点的标号 然后结果是什么呢?无尽的runtime erro ...
- Gao Big 深圳行
day 1 来到深圳的国际化大都市之后,首先要做的事情就是···坐地铁?? 到了旅店,已经比较晚了,又折腾了两三下.. day 2 第二天一早,一行人出发来到深圳大学(nv shen su she)参 ...
- NetBeans 8.0 连接远程服务器
step: ① 新建项目 -- PHP -- 来自远程服务器的 PHP 应用程序 -- 下一步 ② 名称和位置 项目名称:自己取: 源文件夹:通过 “浏览” 选择本地项目文件夹.注意文件夹内不能有 n ...