如何在 angularjs 中使用 ngStorage [英] How to use ngStorage in angularjs

问题描述

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

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

两个部分都使用 localStorage [ngStorage] 并且在控制器中这些值被计算并在点击按钮 [ng-click="functionName()"] 时被推送到 partial2.此函数具有执行计算的逻辑.如何做到这一点?

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

解决方案

假设您有 ng-model 属性，用于尝试在 partial1 中捕获的所有字段，如下所示.ng-model>

部分 1

<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

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

另一种方法:

但是如果您只想将数据从 page1 中的一个控制器发送到 page2 中的另一个控制器，您也可以使用服务来实现.

myApp.service('dataService',function(){无功缓存；this.saveData = 函数(数据){缓存 = 数据；};this.retrieveData = function(){返回缓存；};});

在你的第一个控制器中注入这个服务来保存页面数据，然后在你的第二个控制器中再次注入它来检索保存的页面数据.

myApp.controller('Ctrl1', function($scope, dataService){dataService.saveData($scope.pageData);});myApp.controller('Ctrl2', function($scope, dataService){$scope.pageData = dataService.retrieveData();});

visit https://github.com/gsklee/ngStorage.

My code has 2 partials, in partial1 I've 3 input box and data entered in them be 'abc', 'pqr', 'xyz' and on click of button I want to get redirected to partial2 where input box gets populated with following details calculated in a controller 'abcpqr', 'abxy'.

Both partials uses localStorage [ngStorage] and in controller these values get calculated and gets pushed to partial2 on click of button [ng-click="functionName()"]. This function has logic to perform the calculations. how to do this?

In the app I'm creating i've 20+ such fields in both partials, so I don't want to pass values rather get them stored in localStorage and access from there.

解决方案

Assuming that you have ng-model attributes for all the fields that you're trying to capture in partial1 like below.

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;

    });

Partial-2

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

Another Approach :

But if you just want to send data from one controller in page1 to another controller in page2, you can do that with a service as well.

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

   var cache;

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

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

});

Inject this service in your first controller to save the page data and inject it again in your second controller to retrieve the saved page data.

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

   dataService.saveData($scope.pageData);

});

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

   $scope.pageData = dataService.retrieveData();

});

这篇关于如何在 angularjs 中使用 ngStorage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！