在
MVC
中,为了方便维护,针对不同业务会使用不同的controller
。有时我们需要在不同的controller
中共享数据,本文旨在解决这一问题。
AngularJS中有一个$rootScope
对象,它是AngularJS中最接近全局作用域的对象,是所有$scope
对象的最上层,可以简单理解为BOM
中的window对象或Node.js
中的global对象。最简单的方式是直接将要共享的数据绑定到$rootScope
对象中:
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<meta charset="utf-8">
<title>Share Between Ctrls</title>
<script src="lib/angular.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<script>
var app = angular.module("exampleApp", []);
app.controller("FirstController", function($rootScope, $scope) {
$scope.shareObject = function (obj) {
$rootScope.person = obj || {};
};
});
app.controller("SecondController", function($rootScope, $scope) {
$scope.reportData = function() {
var reportString = "",
person = $rootScope.person || {};
for(var i in person) {
reportString += "person's " + i + " is " + person[i] + "\n";
}
alert(reportString);
};
});
</script>
</head>
<body>
<div class="well" ng-controller="FirstController">
<input type="text" ng-model="person.name" placeholder="Input Your Name" />
<input type="text" ng-model="person.age" placeholder="Input Your Age" />
<input type="text" ng-model="person.sex" placeholder="Input Your Sex" />
<button class="btn btn-primary" ng-click="shareObject(person)">Share Data</button>
</div>
<div class="well" ng-controller="SecondController">
<button class="btn btn-primary" ng-click="reportData()">Report Data</button>
</div>
</body>
</html>
整个效果如图-1 ~ 图-4所示:
图-1 页面加载完毕
图-2 第一次点击"Report Data"按钮
图-3 填写信息,点击"Share Data"按钮
图-4 再次点击"Report Data"按钮
这样做解决了问题,在需要共享的数据量较少时可以采用,但因为会污染全局作用域,因此十分不推荐使用这种方法。
service
共享数据...
<script>
var app = angular.module("exampleApp", []);
//需要将DataShareService注入
app.controller("FirstController", function($scope, DataShareService) {
$scope.person = {};
$scope.shareObject = function (obj) {
//赋值
DataShareService.shareObject = obj;
};
});
//需要将DataShareService注入
app.controller("SecondController", function($scope, DataShareService) {
var person = {};
$scope.reportData = function() {
var reportString = "",
person = DataShareService.shareObject; //取值
for(var i in person) {
reportString += "person's " + i + " is " + person[i] + "\n";
}
alert(reportString);
};
});
//自定义service,在多个controller之间共享数据
app.service("DataShareService", function() {
//无需定义其他变量,无需return,如果使用factory()则至少需要return一个空对象
});
<!--
这里的
app.factory()
可以替换为
app.constant()
app.value()
app.service()
-->
</script>
...
最终实现的效果和使用$rootScope
直接绑定完全相同,优点是解决了全局作用域被污染问题。有关最后app.factory()
的替换问题可以参考之前的一篇博客,使用AngularJS自定义service,有兴趣的读者可以自己试验一下。
$scope
可以向其他$scope
广播或发送事件,其他$scope
监听事件并处理,从而实现通信,也就是说可以通过$scope
事件机制实现不同controller
之间的数据共享。$scope
事件机制包括以下三种方法:
表-1 有关$scope事件机制的三个方法
其中,$broadcast(name, args)
为父级$scope
向子级$scope
发送事件,$emit(name, args)
为子级$scope
向父级$scope
发送事件,$on(name, handler)
为监听事件的函数,handler
参数为对事件进行处理的函数,该函数包含两个参数:event和args,分别为事件对象和发送事件时传递的args参数。
这里我们不存在controller
的嵌套,所有的$scope
为同级,需要使用“祖宗级”$rootScope
进行广播。有关controller
嵌套和继承的问题会在之后的博文中讲到。
使用$scope
事件机制处理数据共享的JS
代码如下所示,由于HTML
代码与之前相同,故省略:
...
<script>
var app = angular.module("exampleApp", []);
app.controller("FirstController", function($rootScope, $scope) {
$scope.person = {};
$scope.shareObject = function (obj) {
obj = obj || {};
//将事件以"ShareObjectEvent"为名进行广播
$rootScope.$broadcast("ShareObjectEvent", obj);
};
});
app.controller("SecondController", function($scope) {
//监听"ShareObjectEvent"事件
$scope.$on("ShareObjectEvent", function(event, args) {
person = args;
});
$scope.reportData = function() {
var reportString = "";
for(var i in person) {
reportString += "person's " + i + " is " + person[i] + "\n";
}
alert(reportString);
};
});
</script>
...
最终实现的效果和使用$rootScope
直接绑定完全相同。
最后需要补充的一点是,使用$scope事件机制与前两种方法相比有着实时性的优势,即数据的变化能够及时被响应,如果想在使用前两种方法时达到监听数据变化实时响应的效果,需要用到AngularJS的$watch
及$watchCollection
功能,详情请参考这里。
完。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。