加載結果後重定向到新頁面

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"); 
}