如何将数据从搜索页面传递到酒店结果显示页面

Question

我在将数据从搜索页面传输到结果显示页面时遇到了问题： 我正在尝试开发一个webapp来预订酒店。它由两页酒店搜索和酒店结果组成，用户在每个页面中搜索酒店后，结果必须显示在酒店结果页面中。

酒店搜索：

  <form >
                        <input type="text" ng-model="Cityin" required="required" placeholder="Where do you want to go?" class="input-large">
                        <input type="date" ng-model="CheckIn"  required="required" placeholder="Check In">
                        <input type="date" ng-model="CheckOut" required="required" placeholder="Check Out" >
                        <div class="selector">
                            <select class="guests-input">
                                <option value="1">1 Guests</option>
                                <option value="2">2 Guests</option>
                                <option value="3">3 Guests</option>
                                <option value="4">4 Guests</option>
                                <option value="5">5+ Guests</option>
                            </select>
                            <span class="custom-select">Guests</span>
                        </div>
                        <input type="submit" ng-click="GetHotel();" value="Search">
                    </form>

控制器js：

 $scope.GetHotel= function () {  
        alert("in");
        var date = new Date($scope.CheckIn);
        var mnth = ("0" + (date.getMonth() + 1)).slice(-2);
        var day = ("0" + date.getDate()).slice(-2);
        var CheckIn = [date.getFullYear(), mnth, day].join("-");
        var datej = new Date($scope.CheckOut);
        var mnthk = ("0" + (datej.getMonth() + 1)).slice(-2);
        var dayl = ("0" + datej.getDate()).slice(-2);
        var CheckOut = [datej.getFullYear(), mnthk, dayl].join("-");
        alert(CheckIn);
        alert(CheckOut);
        try {
      
            $http({
                method: 'POST',
                data: { CheckInCity: $scope.Cityin, CheckInDate: CheckIn, CheckOutDate: CheckOut },
                url: '/Admin/FlightDisp',
                timeout: httpTimeout,
            }).then(function successCallback(response) {              
                var json = angular.fromJson(response.data.myJsonResponse);
                if (json != null || json != "") {
                   
                    $window.location.href = '/Admin/HotelResult';
                    var hoteldat = json.data;
                    $scope.HotelDeat = hoteldat;
                  
                }               
            }, function errorCallback(response) {
                alert("error");

            });

        } catch (ex) { alert(ex); }
    }

酒店结果页面：

<div ng-repeat="hotels in HotelDeat">
                                <div class="list-block main-block room-block">
                                    <div class="list-content">
                                        <div class="main-img list-img room-img">
                                            <a href="#">
                                                <img src="~/Content/Hotel_Result/images/available-room-1.jpg" class="img-responsive" alt="room-img">
                                            </a>
                                            <div class="main-mask" ng-repeat="prices in hotels.offers">
                                                <ul class="list-unstyled list-inline offer-price-1">
                                                    <li class="list-inline-item price">{{prices.price.total}}<span class="divider">|</span><span class="pkg">7 Nights</span></li>
                                                    <li class="list-inline-item rating">
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star lightgrey"></i></span>
                                                    </li>
                                                </ul>
                                            </div><!-- end main-mask -->
                                        </div><!-- end room-img -->

                                        <div class="list-info room-info">
                                            <h3 class="block-title"><a href="#">{{hotels.hotel.name}}</a></h3>
                                            <p class="block-minor">Max Guests:02</p>
                                            <p>{{hotels.hotel.description.text}}</p>
                                            <a href="#" class="btn btn-orange btn-lg">View More</a>
                                        </div>
                                    </div>
                                </div><!-- end room-block -->
                            </div>

问题：var hoteldat = json.data;中的值必须到酒店结果页面，但是数据没有到$window.location.href = '/Admin/之后的页面HotelResult';，我是一个初学者，非常感谢任何帮助。 提前致谢

Answer 1

优秀的guide here 在控制器之间共享数据：

1. 将共享数据保存在工厂或服务中
2. 将共享数据保存在根范围内
3. 使用事件通知其他控制器 数据更改

你的情况最有可能 1

创建工厂服务（这是单例，这意味着只有一个实例

app.factory('Holder', function() {
  return {
    value: 0
  };
});

注入两个控制器。第一个将设置数据，第二个将检索。

app.controller('ChildCtrl', function($scope, Holder) {
  $scope.Holder = Holder;
  $scope.increment = function() {
    $scope.Holder.value++;
  };
});

app.controller('ChildCtrl2', function($scope, Holder) {
  $scope.Holder = Holder;
  $scope.increment = function() {
    $scope.Holder.value++;
  };
});

我们也在谈论 SPA。您不应使用 href 在 SPA 中导航。你应该使用路由机制here，否则上面的解决方案会失败。​​

Answer 2

亲爱的， 感谢您的回答。我使用本地存储将我的值从搜索页面传递到结果页面： js函数： $scope.GetHotel= 函数 () {

        **window.localStorage.removeItem('data');**
       
        try {

            $http({
                method: 'POST',
                data: { CheckInCity: $scope.Cityin, CheckInDate: CheckIn, CheckOutDate: CheckOut },
                url: '/Admin/FlightDisp',
                timeout: httpTimeout,
            }).then(function successCallback(response) {

            **localStorage.setItem("data", response.data.myJsonResponse);**
               $window.location.href = '/Admin/FlightResult';

            }, function errorCallback(response) {
                alert("error");

            });

在我的 HotelDispController 中，我使用键值获取数据：

app.controller('HotelDispController', ['$scope', '$window', '$rootScope', '$http', '$location', function ($scope, $window, $rootScope, $http, $location) {
   
    **var myData = localStorage.getItem('data');**   
    var json = angular.fromJson(myData);   
    var hoteldat = json.data;  
    $scope.HotelDeat = hoteldat; 
   
}]);
  
            } catch (ex) { alert(ex); }
        }
    }]);

GetHotel 函数开始时，数据被删除，以避免产生重复数据。