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不会被 ...
随机推荐
- COGS731 [网络流24题] 最长递增子序列（最大流）
给定正整数序列x1,..., xn (n<=500).(1)计算其最长递增子序列的长度s.(2)计算从给定的序列中最多可取出多少个长度为s的递增子序列.(3)如果允许在取出的序列中多次使用x1和 ...
- Ubuntu14.04 Server amd64 配置 Apache+MySQL+Django
写在前面 因为不同版本的apache等软件文件夹和配置文件的名称设置都不尽相同,网上累死累活查了好多个博客就没一个能成功配出来的. 所以本文也不一定能帮到你,请在确定对自己有用之前不要盲目转载,以免给 ...
- javascript，HTML，PHP，ASP做301跳转代码 SEO优化设置
URL HTTP Redirection URL http redirection is an automatic URL change operation from one URL to anoth ...
- 【BZOJ】1468: Tree（点分治）
http://www.lydsy.com/JudgeOnline/problem.php?id=1468 分治真是一门高大上的东西... 好神... 树分治最好资料是:qzc的<分治算法在树的路 ...
- APIO2015
还没有写完APIO2015的题目,打算今天写一写. T1: 按位DP,DP时要保证已确定的位为0. 前4组设f[n][k]表示把前n个分成k组是否合法. 最后一组设g[n]表示把前n个最少分为多少组才 ...
- hdu A计划
这道题是一道bfs的题目,因为题目中给的数据很小,所以可以采用优先队列的方式来简化处理.这道题在搜索的过程中要注意map1的不同层次的转换,即对'#'的理解.之前wa了两次是因为我考虑了如果上下两层对 ...
- Why Consumer Hardware Start-ups Fail
今年看到一篇文章还是很受启发. If you have the guts to start selling what you believe in, customers who share your ...
- 《GK101任意波发生器》升级固件发布（版本：1.0.2build955）
一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build955 编译日期:2015-12-14 ====================================== 二. ...
- elasticsearch插件大全
Elasticsearch扩展性非常好,有很多官方和第三方开发的插件,下面以分词.同步.数据传输.脚本支持.站点.其它这几个类别进行划分. 分词插件 Combo Analysis Plugin (作者 ...
- 开源top100
1.SwitchyOmega 项目简介:SwitchyOmega 是 SwitchySharp 的新版本.这是一个 Chrome 浏览器用来切换不同代理的插件.SwitchyOmega 初次安装时会检 ...