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

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

1 个答案: