如何在angularjs中使用ngStorage

一尘不染

如何在angularjs中使用ngStorage

angularjs

我的代码有2个局部变量，在partial1中，我有3个输入框，在其中输入的数据是’abc’，’pqr’，’xyz’，单击按钮后，我想重定向到partial2，其中输入框如下所示在控制器“
abcpqr”，“ abxy”中计算的详细信息。

两个partials都使用localStorage [ngStorage]，并且在控制器中，单击按钮[ng-click =“
functionName（）”]后，将计算这些值并将其推入partial2。该功能具有执行计算的逻辑。这该怎么做？

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

阅读 232

2020-07-04

共1个答案

一尘不染

假设您具有ng-model要在part1中捕获的所有字段的属性，如下所示。

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

});

2020-07-04