如何在 angularjs 中使用 ngStorage

How to use ngStorage in angularjs

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

我的代码有 2 个部分,在部分 1 中我有 3 个输入框,其中输入的数据是 'abc'、'pqr'、'xyz' 并单击我想要的按钮重定向到 partial2,其中输入框填充了在控制器 'abcpqr'、'abxy'.

中计算的以下详细信息

两个 partials 使用 localStorage [ngStorage] 并且在控制器中计算这些值并在单击按钮 [ng-click="functionName()"] 时推送到 partial2。此函数具有执行计算的逻辑。怎么做?

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

假设您尝试在 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 中的一个控制器发送到 page2 中的另一个控制器,您也可以使用服务来实现。

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();

});