1、数据共享—多个controller之间
1)父子controller
$scope 能继承---子controller复制了父controller的$scope
“不能叫同步,只是复制”
消息机制(事件):
$scope.$emit('名字',数据); // 触发:自己 + 父级 向上发送
$scope.$broadcast('名字',数据); // 触发:自己 + 子级 向下发送
$scope.$on('名字',数据); // 接收
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module('test',[]);
app.controller('con1',function($scope){
$scope.$on('new_event',function(event,data){
// event 事件对象
// data 数据
alert(event.name); // new_event
alert(data.a); // 5
});
});
app.controller('con2',function($scope){
$scope.fn = function(){
$scope.$emit('new_event',{a:5,b:6});
};
});
</script>
</head>
<body>
<div ng-app="test" ng-controller="con1">
<div ng-controller="con2">
<input type="button" value="emit" ng-click="fn();"/>
</div>
</div>
</body>
</html>
2)无关controller
用自定义依赖来存储数据
factory、service、provider —创建的依赖只有一个,所以可以共享数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module('test',[]);
app.factory('dataShare',function(){
return {
a:12
}
});
app.controller('con1',function($scope,dataShare){
alert(dataShare.a); // 12
dataShare.a = 13;
});
app.controller('con2',function($scope,dataShare){
alert(dataShare.a); // 13
});
</script>
</head>
<body>
<div ng-app="test">
<div ng-controller="con1"></div>
<div ng-controller="con2"></div>
</div>
</body>
</html>
2、router 多视图
根据URL来切换视图
router开发步骤:
1)引入文件
<script src="angular-route.js"></script>
2)引入ngRoute模块
var app = angular.module('test',['ngRoute']);
3)配置route
app.config(function($routeProvider){
$routeProvider.when(
'地址',
{
'配置信息'
}
)
})
// 配置信息
// template/templateURL
// controller
// resolve
Router 事件:
routeChangeStart
r
o
u
t
e
C
h
a
n
g
e
S
t
a
r
t
routeChangeSuccess
$routeChangeError
$scope.$on('$routeChangeStart',function(event,next,current){
})