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

Question

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

这是我用来从 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");
        }

    }

结果页面控制器：

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

您正在尝试从异步上下文切换到同步上下文（使用“搜索”变量）。在大多数情况下，这种方法存在问题。

而不是继续异步流，例如：

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