加载结果后重定向到新页面

Question

我正在制作一个小型网络应用程序，根据用户输入获取有关即将发生的事件的信息。一旦数据被检索并存储在本地存储中，我想将用户重定向到结果页面。不幸的是，我很难做到这一点，因为在检索到搜索内容之前用户被重定向。

这是我用来从API获取数据的服务。

EventsService

app.service("EventsService", ["$http", function ($http) { 

this.searchByCity = function (city) { 
    return $http.get("http://api.gigatools.com/city.json?cities[]=" + city + "&api_key=d924857077bc386767") 
     .then(function (response) { 
      return response.data[1]; 
     }) 
} 


this.searchByArtist = function (artist) { 
    return $http.get("http://api.gigatools.com//gigs.json?users[]=" + artist + "&api_key=d924857077bc386767") 
     .then(function (response) { 
      var allEvents = response.data[1]; 
      var filteredEvents = []; 
      allEvents.forEach(function (singleEvent) { 
       if (singleEvent.event_owner === artist) { 
        filteredEvents.push(singleEvent); 
       } 
      }) 
      return filteredEvents; 
     }) 
} 

this.searchByVenue = function (venue) { 
    return $http.get("http://api.gigatools.com/venue.json?venues[]=" + venue + "&api_key=d924857077bc386767") 
     .then(function (response) { 
      return response.data[1]; 
     }) 
}}]) 

这是搜索功能，当用户输入他的事件首选项并点击搜索按钮时执行。

$scope.search = function (input) { 

     var searching = true; 
     switch ($scope.selected.id) { 
      case "city" : 
       console.log("Have to search by city."); 
       EventsService.searchByCity(input) 
        .then(function (events) { 

         $localStorage.results = events; 
         searching = false; 
         console.log($localStorage.results); 


        }) 
       break; 

      case "artist" : 
       console.log("Have to search by artist."); 
       EventsService.searchByArtist(input) 
        .then(function (events) { 
         $scope.results = events; 
        }) 
       break; 

      case "venue" : 

       console.log("Have to search by venue."); 
       EventsService.searchByVenue(input) 
        .then(function (events) { 
         $scope.results = events; 
        }) 
       break; 

     } 
     if (searching === false) { 
      console.log("Finished."); 
      windows.location.href("views/ResultsPage.html"); 
     } 

    } 

的resultsPage控制器：

var app = angular.module("resultsPage",['ngStorage','ngRoute']); 

app.controller ("resultsCtrl",function ($scope,$localStorage) { 


    var loadResults = function() { 
     $scope.results = $localStorage.results; 
     console.log($localStorage.results); 
    } 

    loadResults(); 

}) 

我不知道，如果这个代码就足够了。让我知道是否应该分享代码的其他部分。

Answer 1

您试图从异步上下文切换到sycnronous（使用“搜索”var）。在大多数情况下，这种方法有问题。

而不是仅仅继续异步流程，这样的例子：

$scope.search = function (input) { 

    var searching = true; 
    switch ($scope.selected.id) { 
     case "city" : 
      console.log("Have to search by city."); 
      EventsService.searchByCity(input) 
       .then(saveEvents) 
       .then(redirectToResultsPage) 
      break; 

     // ... 
    } 

    // if (searching === false) { 
    //  console.log("Finished."); 
    //  windows.location.href("views/ResultsPage.html"); 
    // } 

} 

function saveEvents(events) { 
    $localStorage.results = events; 
    searching = false; 
    console.log($localStorage.results); 
    return $q.when(events); // to chain promises 
} 

function redirectToResultsPage() { 
    console.log("Finished."); 
    windows.location.href("views/ResultsPage.html"); 
}