AngularJS 控制器 控制 AngularJS 应用程序的数据。
ng-controller 指令定义了应用程序控制器。
那么:
1、不同的控制器之间的数据是彼此隔离的
2、不同的控制器之间如何共享数据??
不同的控制器间的数据传递的方法:
方式1:借助于$rootScope
借助于scope与rootScope之间的关系。
把要共享的数据存在$rootScope,所有的子对象就可以读取该数据
scope的id是从2开始依次往上递增,id为1的是谁?rootScope是根作用域对象,其余的scope都是子对象也就是说rootScope是scope的父元素。rootScope时id为1.所有的scope的id是从2开始依次递增的。scope与rootScope的关系如下图:
方式2:控制器之前的嵌套:
在调用控制器的元素 之间的嵌套关系
如下例。运用了方式1与方式2中的方法。
!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller="myCtrl01">
<p>{{"in myCtrl01 name is "+name}}</p>
</div>
<div ng-controller="myCtrl02">
<p>{{"in myCtrl02 name is "+name}}</p>
<p>{{"in myCtrl02 schoolName is "+schoolName}}</p>
<!-- 控制器之间的嵌套-->
<div ng-controller="myCtrl03">
<p>{{'inMyCtrl03 age is '+age}}</p>
</div>
</div>
<script>
var app = angular.module('myApp',['ng']);
app.controller('myCtrl01', function ($scope,$rootScope) {
$scope.name = 'myCtrl01';
console.log($scope);
console.log($rootScope);
$rootScope.schoolName = "Tarena";
})
app.controller('myCtrl02', function ($scope){
console.log($scope);
$scope.age = 10;
});
app.controller('myCtrl03', function ($scope) {
})
</script>
</body>
</html>
方法三:触发事件传递参数
绑定事件:
scope.on(‘事件名称’,function(event,data){})
触发事件:
//从子作用对象 向 父作用域对象 传递事件
scope.emit()
//从父作用对象 向 子作用域对象 传递事件
scope.broadcaset()
如下例:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller="myCtrl01">
<button ng-click="sendToChild()">
向myCtrl02传递参数
</button>
<div ng-controller="myCtrl02">
<button ng-click="sendToParent()">向父作用域传数据</button>
</div>
</div>
<script>
var app = angular.module('myApp', ['ng']);
app.controller('myCtrl01', function ($scope) {
$scope.sendToChild = function () {
$scope.$broadcast('event1','hello')
}
$scope.$on('event2', function (event,data) {
console.log('data from son is '+data);
})
});
app.controller('myCtrl02', function ($scope) {
//绑定一个event1的事件
$scope.$on('event1', function (event,data) {
console.log('myCtrl02 rev data is '+data);
})
$scope.sendToParent = function () {
// 通过$emit方法向父级元素触发事件,同时传递数据
$scope.$emit('event2','Hello Parent')
}
});
</script>
</body>
</html>