angualrjs的不同控制器里的数据共享和交互

清疚 2022-06-05 04:40 38阅读 0赞

第一、创建一个factory来储存和调取你的数据(你可以单独创建一个js文件，按照语义命名如：dataService.js。然后在你的主页面引入这个JS文件)

html 代码效果预览

1 2 
        
         
       
        
       
        
        
          < script   src = "dataService.js" > </ script >

创建一个factory命名为：dataService.js

javascript 代码 效果预览

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 
        
         
       
        
       
        
        
         'use strict' ; angular . module ( 'myApp' ) . factory ( 'datadService' , [ '$window' , function ( $window )  {       return {                        //存储单个属性              set  : function ( key , value ) {                $window . localStorage [ key ] = value ;              } ,                      //读取单个属性              get : function ( key , defaultValue ) {                return   $window . localStorage [ key ]  ||  defaultValue ;              } ,                     //存储对象，以JSON格式存储              setObject : function ( key , value ) {                $window . localStorage [ key ] = JSON . stringify ( value ) ;              } ,                      //读取对象              getObject :  function  ( key )  {                return  JSON . parse ( $window . localStorage [ key ]  ||  '{}' ) ;              }            } }]) ;

第二、将你创建的这个方法模块【datadService】注入到你要控制器中如下的控制器为【productCtrl】，下面我们创建一个set.js文件，里面代码如下：

html 代码效果预览

1 2 
        
         
       
        
       
        
        
          < script   src = "set.js" > </ script >

内部代码为：

javascript 代码 效果预览

1 2 3 4 5 6 7 8 9 10 11 12 13 14 
        
         
       
        
       
        
        
         'use strict' ; angular . module ( 'myApp' ) . controller (          'productCtrl' ,          [  '$scope' , 'datadService' ,                    function ( $scope ,  datadService )  {                         $scope . appiAppType  =  1 ;                         //这里面$scope.appiAppType的赋值同样可以通过$http.post或者$http.get                         //等方法返回的参数去赋值，例子如下：                         //$http.post('这里是你所要访问的接口【URL】',这里是你想要上传的参数).success(function(data){                         // $scope.appiAppType = data;                         //});                         datadService . setObject ( "lodinData" ,  $scope . appiAppType ) ; // 将你获取来的数据存储到你之前创建的【datadService】中，这里面的【lodinData】是KEY（个人理解就是你把数据存到大箱子里面这个箱子就是【datadService】，为了方便在这个箱子里面更好的寻找你想要的数据就给他一个小标签，那就是【lodinData】）                    }  ]) ;

第三、关于存储好的数据如何在不同的控制其中获取到，下面我们创建一个get.js,里面代码如下：

html 代码效果预览

1 2 
        
         
       
        
       
        
        
          < script   src = "get.js" > </ script >

内部代码为：

javascript 代码 效果预览

1 2 3 4 5 6 7 8 9 10 11 12 13 14 
        
         
       
        
       
        
        
         'use strict' ; //首先大家要把之前创建好的模块也就是那个装数据的箱子【datadService】放到这个控制器中（也就是模块注入） //其次大家通过之前咱们设定的标签【lodinData】，用【getObject('key')】方法取到你想要的数据； //具体实现就一行代码：datadService.getObject('lodinData');「注：把箱子拿出来（datadService）用（getObject）去拿你的这个（lodinData）标签下的数据」 angular . module ( 'myApp' ) . controller (          'completeCtrl' ,          [  '$scope' ,  'datadService' ,                    function ( $scope ,  datadService )  {                        //我们这里取到来上面已经存好的数据：【datadService.getObject('lodinData');】并且把这个数据赋值给了【$scope.LoginList】                         $scope . LoginList  =  datadService . getObject ( 'lodinData' ) ;                         //这里大家可以打印一下$scope.LoginList  看看里面是什么；                         alert ( JSON . stringify ( $scope . LoginList ))                    }  ]) ;

1、定义服务

//=========本地存储数据服务============
        app.factory('locals', ['$window', function ($window) { 
            return {        //存储单个属性
                set: function (key, value) { 
                    $window.localStorage[key] = value;
                },        //读取单个属性
                get: function (key, defaultValue) { 
                    return $window.localStorage[key] || defaultValue;
                },        //存储对象，以JSON格式存储
                setObject: function (key, value) { 
                    $window.localStorage[key] = JSON.stringify(value);//将对象以字符串保存
                },        //读取对象
                getObject: function (key) { 
                    return JSON.parse($window.localStorage[key] || '{}');//获取字符串并解析成对象
                }
    
            }
        }]);
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18

2、controller中调用：   
先注入服务，再set get

app.controller('supplyAddCtrl', function ($scope, $http, $location, locals, $timeout, $compile) { 
    
       //存
         locals.set("firstpos", firstpos);//字符串
         locals.setObject("secondpos", secondpos);//对象
    
       //取
        locals.get("firstpos");
        locals.getObject("secondpos");
       }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10

参考：

[angularjs 本地数据存储LocalStorage][angularjs _LocalStorage]

[关于AngularJs 数据本地存储的实现（每一个独立的JS文件或者不同的控制器如何实现数据的共享与交互）][AngularJs _JS]

[angularjs _LocalStorage]: https://my.oschina.net/furw/blog/663566
[AngularJs _JS]: http://www.qdfuns.com/notes/40399/d7854dd3294138fcde95711f31343e0a.html