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。我将点击关于项目然后我导航到关于页面。然后我通过单击主页超链接再次导航到主页，现在我需要查看我输入并获得的先前数据。如何做到这一点？提前谢谢。

Answer 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

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

1 个答案: