結果がロードされた後に新しいページにリダイレクト

Question

私は、ユーザーの入力に基づいて、予定されているイベントに関する情報を取得する小さなWebアプリケーションを作っています。データが取得され、ローカルストレージに保存されるとすぐに、ユーザーを結果ページにリダイレクトする必要があります。残念ながら、検索のコンテンツが取得される直前にユーザーがリダイレクトされるため、問題が発生しています。

これは、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"); 
}