您的位置:首页 > Web前端 > AngularJS

angularjs service全局保存数据的误区

2016-10-20 10:44 246 查看
        《angular权威指南》中有这么一句话“服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性。”

         这里的【应用的整个生命周期】中的【应用】到底是什么?估计原文是【app】,然后就被翻译成了【应用】。【应用】是有歧义的,他可以有两个含义:1、指整个web应用,这样的话,他就类似于session了。第二个含义:【应用】指某个module,在这个module下面的为同一个实例。

          那么,到底是不是第一个含义呢?我们来试一下。

          上一篇文章中我将service理解为了可以提供类似session的东西,我们看一下代码:

          

(function(angular){
angular.module('app.login')
.factory('userService',function($http){
return {
http:$http,
token:'',
auth:[],
loginname:'',
login:function(loginname,password,fn){
this.http({
url:'../../scripts/loginModule/services/loginOKTest.js',
method:'GET'
})
//data,header,config,status
.success(Base.bindArguments(this,function(){
var data=arguments[0][0];
if(data[0].success){
this.token=data[0].token;
this.auth=data[0].auth;
Cookies.setCookieValue("loginname",this.loginname,60*60*1000);
Cookies.setCookieValue("token",this.token,60*60*1000);
fn(data[0]);
}
}))
.error(function(data,header,config,status){
alert("验证服务请求失败!");
});
},
getToken:function(){
return this.token;
},
getLoginname:function(){
return this.loginname;
},
getAuth:function(){
return this.auth;
},
loginout:function(){
this.token='';
this.loginname='';
this.auth=[];
Cookies.delCookieValue("token");
Cookies.delCookieValue("loginname");
}
};
});
})(window.angular);
我们在这里设置了token和auth成员变量

这里的Base.bindArguments保证了回调中的this为该服务
Base.bindArguments=function(context,fn){
return function(){
return fn.call(context,arguments);
};
};


然后,我们在另一个module中看看能不能取到token和auth

(function(angular){

if(!app)
app={};
if(!app.main)
app.main=angular.module('app.main', []);
app.main.controller('MenuController',function($scope,menuService,userService){
var loginname=Cookies.getCookieValue("loginname");
var token=Cookies.getCookieValue("token");
Cookies.delCookieValue("token");
Cookies.delCookieValue("loginname");
$scope.menu=[];

menuService.initMenu(loginname,token,function(menu){
$scope.menu=menu;
$scope.$broadcast("menuLoaded");
});

$scope.displaySwitch=function(index){
if($scope.menu[index].isShow)
$scope.menu[index].isShow=false;
else
$scope.menu[index].isShow=true;
};

});

})(window.angular);


结果是这里的loginname和token是空的。说明这里依赖注入的userService和之前的userService已经不是同一个对象了。也就是这两个userService变量中的指针指向不同的堆内存
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  angularjs