angularjs - 如何在 AngularJS 中使用 ngStorage

Question

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

我的代码有2个部分，在partial1中我有3个输入框，在其中输入的数据是“abc”，“pqr”，“xyz”，单击按钮时我想重定向到输入框所在的partial2填充了在 Controller “abcpqr”、“abxy”中计算的以下详细信息。

两个partials都使用localStorage [ngStorage]，并且在 Controller 中，这些值被计算并在单击按钮[ng-click="functionName()"]时被推送到partial2。该函数具有执行计算的逻辑。如何做到这一点？

在我正在创建的应用程序中，我在两个部分中都有 20 多个此类字段，因此我不想传递值，而是将它们存储在 localStorage 中并从那里进行访问。

Answer 1

假设您尝试在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> 

另一种方法:

但是，如果您只想将数据从 page1 中的一个 Controller 发送到 page2 中的另一个 Controller ，您也可以使用服务来完成此操作。

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

   var cache;

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

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

});

将此服务注入(inject)到您的第一个 Controller 中以保存页面数据，然后再次将其注入(inject)到您的第二个 Controller 中以检索保存的页面数据。

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

   dataService.saveData($scope.pageData);

});

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

   $scope.pageData = dataService.retrieveData();

});