Question

我的AngularJs Web应用程序中有3个视图。在View1中，我显示的是一个表，它通过单击按钮从控制器获取数据。如果我导航到另一个视图并返回到第一个视图，我无法看到该表，我需要按下按钮才能在视图中获取表格。因此，当从其他页面返回时，我需要在view1中拥有表。

controller.js

app.controller('OpenOrdersController', [
    '$scope',
    '$http',
    'salesOrgService',
    'dataService',
    function($scope, $http, salesOrgService, dataService, $routeParams,
            $location, SVC_DOMAIN, IMAGE_BASE) {
        console.log("Enter OpenOrdersController");
        $scope.data = dataService;
        $scope.OpenOrdersSummary = $scope.data.data.responsedata;
        $scope.user.model.salesorg = "2015";
        $scope.getOpenOrders = function(salesOrg) {
            $scope.OpenOrdersSummary = {
                "SapExOpenOrderTab" : [ {

                    "col1" : "0009421175",

                    "col2" : "000000",

                    "col3" : "0000"
                },

                {

                    "col1" : "0009421820",

                    "col2" : "000000",

                    "col3" : "0000",

                } ]
            };

        };
    } ]);
app.service('dataService', function() {
this.data = {}
this.data.responsedata = '';
});

的index.html

<div>
<button class="btn btn-primary" type="button"
    data-ng-disabled="!user.model.salesorg "
    data-ng-click="getOpenOrders(user.model.salesorg)">Refresh</button>
</td>
<table
    class="table table-hover table-striped table-condensed table-bordered ordersTable">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-hide="OpenOrdersSummary.SapExOpenOrderTab.length > 0"
            class="error">
            <td colspan="4">
                <div class="text-center">
                    <strong>This request may take some time ; please wait for
                        response !!! </strong>
                </div>
            </td>
        </tr>
        <tr
            data-ng-repeat="sampleProductCategorie in OpenOrdersSummary.SapExOpenOrderTab | orderBy:orderby:reverse">
            <td>{{sampleProductCategorie.col1}}</td>
            <td>{{sampleProductCategorie.col2}}</td>
            <td><a
                ng-href="#/openOrdersDetail/{{sampleProductCategorie.col1}}">{{sampleProductCategorie.col3}}</a></td>
        </tr>
    </tbody>
</table>

这里我基于一些堆栈溢出问题初始化服务中的表对象，并在控制器中分配表数据。我的要求是从其他视图返回index.html视图时我希望在index.html视图中看到以前的表数据。请帮帮我。

Answer 1

在您提供的示例中，数据不是来自服务。它似乎是在控制器中硬编码并按需设置为范围变量OpenOrdersSummary（单击按钮）。如果您的数据最终将被硬编码，您可以完全放弃服务 - 如果它最终来自外部源，那么该服务是有意义的，您应该将数据值分配给服务的数据。 servicedata变量。一旦控制器加载到行

，这将导致数据显示

$scope.OpenOrdersSummary = $scope.data.data.responsedata;

如果您需要延迟加载数据，那么您需要服务来实现某种loadData函数，该函数将根据需要设置服务的data.servicedata变量。

如果没有澄清，请告诉我，我可以帮忙编写一些示例代码。

Answer 2

根据你的例子，我应该这样做。

正如您在示例中提到的，响应数据是硬编码的，请尝试在服务中使用http请求。

app.service('dataService', ['$http', function($http) {
  this.data = {
    responsedata: ''
  }

  this.makeRequest = function() {
    //...Use $http to make request and set response from request to this.data.responsedata
  }

  return this;
}]);

这是一个有效的jsfiddle： http://jsfiddle.net/reggmezb/3/

在AngularJs中切换多个视图时如何保存和恢复视图数据？

2 个答案: