在AngularJS中从page2导航回来后如何保留page1的输入数据答案

【问题标题】：How to keep entered data of page1 after navigating back from page2 in AngularJS在AngularJS中从page2导航回来后如何保留page1的输入数据
【发布时间】：2015-08-29 11:27:37
【问题描述】：

我有三个带有路由的页面。如果我在第一页输入了一些输入并得到了一些结果，接下来我导航到第二页，最后我从第二页返回到第一页。然后我想查看我之前输入的数据和结果。这里的代码sn -p

index.html

<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="script.js"></script>
</head>
<body ng-controller="mainController">
    <nav class="navbar navbar-default">
        <div class="container"></div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
            </ul>
        </div>
    </nav>
    <div id="main">
        <div ng-view></div>
     </div>
</body>
</html>

home.html

<div class="jumbotron text-center">
     <h1>Home Page</h1>
          Billing index :
          <input type="text" ng-model='billingMapValue'>
          <br/><br/>

          Billing value :
          {{billingMap[billingMapValue]}}
          <ng-click=navigate() type="button" value='submit'>
      <p>{{ message }}</p>
</div>

about.html

<div class="jumbotron text-center">
    <h1>About Page</h1>

     <p>{{ message }}</p>
</div>

script.js

var scotchApp = angular.module('scotchApp', [ 'ngRoute' ]);

scotchApp.config(function($routeProvider) {
    $routeProvider

    .when('/', {
        templateUrl : 'home.html',
        controller : 'mainController'
     })

    .when('/about', {
        templateUrl : 'about.html',
        controller : 'mainController'
    })

    .when('/contact', {
        templateUrl : 'contact.html',
        controller : 'mainController'
    });
});

scotchApp.controller('mainController', function($scope) {
    $scope.message = 'Everyone come and see how good I look!';
    $scope.billingMapValue = "";
    $scope.billingMap = new Array();
    $scope.billingMap["ZF2"] = "Invoice";
    $scope.billingMap["ZRE"] = "Credit for Returns";
    $scope.billingMap["ZG2"] = "Credit Memo";
    $scope.billingMap["ZL2"] = "Debit Memo";
    $scope.billingMap["ZS2"] = "Cancellation of Credit Memo";
    $scope.billingMap["ZS1"] = "Cancel. Invoice (S1)";
});

现在我需要的是。如果我运行 index.html 页面，我将在主页中有一个输入文本框。如果输入一些索引值，如“ZF2”，我将看到值“发票”。 .home、.about 和 .contact 页面顶部会有超链接列表。我将单击关于项目，然后导航到关于页面。然后我通过单击主页超链接再次导航到主页，现在我需要查看以前输入并获得的数据。如何做到这一点？提前致谢。

【问题讨论】：

您应该使用阅读此viralpatel.net/blogs/angularjs-service-factory-tutorial和stackoverflow.com/questions/12940974/…的服务

标签： html angularjs angularjs-service angularjs-routing angularjs-controller

【解决方案1】：

我建议您使用服务，它将充当不同控制器之间的共享资源。

您需要对代码进行一些更改。

您需要将所有静态移动到服务或角度常数。
在绑定对象时使用dot rule，它将自动更新您的绑定。
为每个视图分配不同的控制器，这是一种更加模块化的方法。

服务

scotchApp.service('dataService', function() {
  this.data = {}
  this.data.billingMap = new Array();
  this.data.billingMap["ZF2"] = "Invoice";
  this.data.billingMap["ZRE"] = "Credit for Returns";
  this.data.billingMap["ZG2"] = "Credit Memo";
  this.data.billingMap["ZL2"] = "Debit Memo";
  this.data.billingMap["ZS2"] = "Cancellation of Credit Memo";
  this.data.billingMap["ZS1"] = "Cancel. Invoice (S1)";
  this.data.selectedBillMap = '';
});

控制器

scotchApp.controller('mainController', function($scope, dataService) {
  $scope.message = 'Everyone come and see how good I look!';
  $scope.billingData = dataService.data.billingMap;
});

Demo Plunkr

【讨论】：

@Subhakar Patnala 对你有帮助吗..>？
它的工作。为什么需要数据。只能通过 billingMap 处理数据吗？
@SubhakarPatnala 不，它不会起作用..这没什么，但我们遵循点规则..你真的需要看看github.com/angular/angular.js/wiki/Understanding-Scopes
@SubhakarPatnala 阅读该文档后，您会明白为什么 this.data 需要在 javascript 中进行他们的原型继承工作
我还有一件事。我正在从 Web 服务获取数据到控制器中的对象。从另一个页面返回时，如何将这些数据保留在页面中。请帮帮我。