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

Question

我正在制作一個小型Web應用程序，該應用程序根據用戶輸入獲取有關即將發生的事件的信息。 我想在檢索到數據並將其存儲在本地存儲中后立即將用戶重定向到結果頁面。 不幸的是，我很難做到這一點，因為用戶正好在檢索搜索內容之前被重定向。

這是我用來從API獲取數據的服務。

活動服務

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

    }

resultPage控制器 ：

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

您正在嘗試從異步上下文切換到同步（使用“搜索” 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");
}