问题描述
从搜索页面到结果显示页面传输数据时遇到问题： 我正在尝试开发一个Web应用程序来预订酒店。它由两页的酒店搜索和酒店结果组成，用户在搜索页面中搜索酒店后，结果必须显示在酒店结果页面中。
酒店搜索：
<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';，我是一位初学者，对我们的帮助非常感谢。 在此先感谢
解决方法
出色的guide here用于在控制器之间共享数据：
- 将共享数据保存在工厂或服务中
- 在根范围内保留共享数据
- 使用事件通知其他控制器有关 更改数据
您的情况最可能是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',Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});
我们也在谈论SPA。您不应使用href在SPA中导航。您应该使用路由机制here，否则上述解决方案将失败。
,DearAll， 感谢您的回答。我使用本地存储将我的值从“搜索”页面传递到结果页面： js函数： $ scope.GetHotel = function（）{
**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函数开始时，数据将被删除，从而避免产生重复的数据。