Redirect auf neue Seite nach dem Laden der Ergebnisse

Question

Ich mache eine kleine Web-App, die Informationen über bevorstehende Ereignisse erhält, basierend auf Benutzereingaben. Ich möchte den Benutzer auf die Ergebnisseite umleiten, sobald die Daten abgerufen und im lokalen Speicher gespeichert werden. Leider habe ich Probleme, da der Benutzer umgeleitet wird, kurz bevor der Inhalt der Suche abgerufen wird.

Dies ist der Dienst, den ich verwende, um die Daten von der API zu erhalten.

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

Dies ist die Suchfunktion, die ausgeführt wird, wenn der Benutzer seine Veranstaltung Präferenzen und klickte auf die Suchtaste eingegeben hat.

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

    } 

Die resultsPage Controller:

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(); 

}) 

Ich bin nicht sicher, ob dieser Code genug ist. Lassen Sie mich wissen, ob ich andere Teile des Codes teilen sollte.

Answer 1

Sie versuchen, vom asynchronen Kontext zu sycnronous zu wechseln (mit "Suchen" var). In den meisten Fällen hat diese Methode Probleme.

statt es nur mit Asynchron-Flow weiterhin, wie dies zum Beispiel:

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