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

angularjs service全局保存数据的误区

2018-04-09 09:44 197 查看
《angular权威指南》中有这么一句话“服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性。”         这里的【应用的整个生命周期】中的【应用】到底是什么?估计原文是【app】,然后就被翻译成了【应用】。【应用】是有歧义的,他可以有两个含义:1、指整个web应用,这样的话,他就类似于session了。第二个含义:【应用】指某个module,在这个module下面的为同一个实例。          那么,到底是不是第一个含义呢?我们来试一下。          上一篇文章中我将service理解为了可以提供类似session的东西,我们看一下代码:          [javascript] view plain copy(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为该服务
[javascript] view plain copyBase.bindArguments=function(context,fn){  
    return function(){  
        return fn.call(context,arguments);  
    };    
};  

然后,我们在另一个module中看看能不能取到token和auth
[javascript] view plain copy(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变量中的指针指向不同的堆内存
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息