当前位置: 首页 > 面试题库 >

如何在angularjs中使用ngStorage

云景焕
2023-03-14
问题内容

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

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

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

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


问题答案:

假设您具有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();

});


 类似资料:
  • 问题内容: 我正在尝试使用简单的jQuery UI。我已经包含了所有内容,并且有一个简单的脚本: 和 我的包括: 但是,当我打开页面时,没有滑块。根据角度文件: 如果有jQuery,则angular.element是jQuery函数的别名。如果jQuery不可用,则angular.element委托给Angular的内置jQuery子集。 但是,我不太了解如何使用,也没有示例。 更新: 我设法在屏

  • 问题内容: 我正在尝试将json对象导入变量。我根据教程使用服务。 我收到意外的令牌错误,因为我不应该使用 -但我真的不知道该使用什么。我用谷歌搜索了3个小时,发现只有$ http。或$ json。答案,但是我觉得可以做得更容易-更清晰。 (完美的解决方案是; D 服务文件: 控制器文件: json文件(几乎; D) 编辑: 我将$ resource(’file.json更改为https://ww

  • 问题内容: 我想在AngularJS中使用Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap- multiselect/ 。我听说有必要将其移至“指令”。但是我认为这很复杂,我不知道该怎么办。如果您有经验,请指导我!Tks。 问题答案: 如果您不需要创建非常可重用的代码,则实际上并不那么复杂。第一步是创建一个基本

  • 我想在下面的文本框中捕捉enter键按下事件。为了更清楚地说明这一点,我使用了一个ng repeat来填充tbody。以下是HTML: 这是我的模块: 我正在使用资源填充表格,我的控制器代码是:

  • 问题内容: 是否可以将Angular.js用作通过Google Apps脚本中的HtmlService服务的网络应用程序的一部分? 我还 按照以下链接中所述更改了文件。如何在GoogleApps脚本提供的HTML网站中使用Angular.js? 但是没有成功。 源代码 : 我进入控制台的输出: 解析“ sandbox”属性时出错:“ allow-modals”,“ allow-popups to

  • 问题内容: 我想在过滤器中向后端请求并返回请求的结果。问题是服务$ http返回一个承诺,这就是问题。 对于存在的问题,我用$超时和角度在我的小提琴的承诺: 我的小提琴 在我的过滤器中,我使用带有承诺的$ timeout,但是最终目标是使用请求http: }); 然后在我看来,我使用了我的过滤器,该过滤器假定以2秒的延迟显示“ ca marche”,但这不起作用: 您会看到过滤器不返回任何内容,并