如何在angularjs中使用ngStorage

时间:2015-10-09 10:33:57

标签: angularjs angular-local-storage ng-storage

访问https://github.com/gsklee/ngStorage

我的代码有2个部分,在partial1我有3个输入框,输入的数据是'abc','pqr','xyz',点击按钮我想重定向到partial2,输入框得到填充了控制器'abcpqr','abxy'中计算的以下详细信息。

两个部分都使用localStorage [ngStorage],并且在控制器中这些值得到计算,并在点击按钮[ng-click =“functionName()”]时被推送到partial2。该函数具有执行计算的逻辑。怎么做?

在应用程序中,我正在创建两个部分中的20多个这样的字段,所以我不想传递值而是将它们存储在localStorage中并从那里访问。

1 个答案:

答案 0 :(得分:14)

假设您在partial1中尝试捕获的所有字段都有ng-model个属性,如下所示。

<强>偏-1

<input type='text' ng-model='pageData.field1' />
<input type='text' ng-model='pageData.field2' />
<input type='text' ng-model='pageData.field3' />

<强> app.js

    var myApp = angular.module('app', ['ngStorage']);

    myApp.controller('Ctrl1', function($scope, $localStorage){

        $scope.pageData = {};

        $scope.handleClick = function(){
           $localStorage.prevPageData = $scope.pageData; 
        };

    });

    myApp.controller('Ctrl2', function($scope, $localStorage){

        $scope.pageData = $localStorage.prevPageData;

    });

<强>偏-2

<p>{{pageData.field1}}</p> 
<p>{{pageData.field2}}</p> 
<p>{{pageData.field3}}</p> 

另一种方法:

但是,如果您只想将第1页的一个控制器中的数据发送到第2页的另一个控制器,您也可以使用服务进行操作。

myApp.service('dataService',function(){

   var cache;

   this.saveData = function(data){
      cache = data;
   };

   this.retrieveData = function(){
      return cache;
   };

});

在第一个控制器中注入此服务以保存页面数据并将其再次注入第二个控制器以检索保存的页面数据。

myApp.controller('Ctrl1', function($scope, dataService){

   dataService.saveData($scope.pageData);

});

myApp.controller('Ctrl2', function($scope, dataService){

   $scope.pageData = dataService.retrieveData();

});