如何在 AngularJS 从第 2 页导航回来后保留第 1 页的输入数据

Question

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

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'，我将看到值 "invoice"。在 .home、.about 和 .contact 页面顶部将有超链接列表。我将单击“关于项目”，然后导航到“关于”页面。然后我通过单击主页超链接再次导航到主页，现在我需要查看我输入的以前的数据和 got.How 来做到这一点？提前致谢。

Answer 1

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

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

您需要将所有静态移动到服务或 angular 常量。
在绑定对象时使用 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

如何在 AngularJS 从第 2 页导航回来后保留第 1 页的输入数据

How to keep entered data of page1 after navigating back from page2 in AngularJS

html

angularjs

angularjs-service

angularjs-routing

angularjs-controller