使用 $state 实现后退按钮功能

Question

我的应用程序有多个状态。

工作流程是这样的，我从登录页面进入警报视图页面，该页面具有表格格式的警报列表。从该列表中，我选择一个警报，将我带到警报详细信息页面，该页面提供该特定警报的详细信息。在该警报详细信息状态中，有导航选项卡形式的子视图，当单击特定选项卡时显示该警报的各个方面。

AlertView.config.js：

$stateProvider.state({
            name: "alert-view",
            parent: "root",
            url: "/alert/view?id&name&criteria&start&end&targets&sort",
            data: {
                pageTitle: "Alert View"
            },
            views: {
                "main.content@": {
                    templateUrl: "components/alerts/alert-view/alert-view.html",
                    controller: "AlertViewsController",
                    controllerAs: "vm"
                }
            }

警报详情页面.config.js

$stateProvider.state({
            name: "alert-details",
            parent: "root",
            abstract: true,
            url: "/alert/details/:id",
            params: {
                // this will make both links /alert/details & /alert/details/ work
                id: {squash: true, value: null}
            },
            data: {
                pageTitle: "Alert Details"
            },
            views: {
                "main.content@": {
                    templateUrl: "components/alerts/alert-details/alert-details.html",
                    controller: "AlertDetailsController as vm"
                },
                "alertViewDetail@alert-details": {
                    templateUrl: "components/alerts/alert-details/overview/overview.html",
                    controller: "AlertDetailsOverviewController as vm"
                    //@todo parent/child controller.
                }
            },
        }).state({
            name: "alert-details.overview",
            parent: "alert-details",
            url: "/overview",
            params: {
                // this will make both links /alert/details & /alert/details/ work
                id: {squash: true, value: null}
            },
            data: {
                pageTitle: "Alert Details"
            },
            views: {
                "alertViewDetail@alert-details": {
                    templateUrl: "components/alerts/alert-details/overview/overview.html",
                    controller: "AlertDetailsOverviewController as vm",
                    controllerAs: "vm"
                }
            }
        }).state({
            name: "alert-details.history",
            parent: "alert-details",
            url: "/history",
            params: {
                // this will make both links /alert/details & /alert/details/ work
                id: {squash: true, value: null}
            },
            data: {
                pageTitle: "Alert Details"
            },
            views: {
                "alertViewDetail@alert-details": {
                    templateUrl: "components/alerts/alert-details/history/history.html",
                    controller: "AlertDetailsHistoryController",
                    controllerAs: "vm"
                }
            }
        }).state({
            name: "alert-details.trigger",
            parent: "alert-details",
            url: "/trigger-events",
            params: {
                // this will make both links /alert/details & /alert/details/ work
                id: {squash: true, value: null}
            },
            data: {
                pageTitle: "Trigger Events"
            },
            views: {
                "alertViewDetail@alert-details": {
                    templateUrl: "components/alerts/alert-details/trigger-events/trigger-events.html",
                    controller: "AlertDetailsTriggerEventsController",
                    controllerAs: "vm"
                }
            }
        }).state({
            name: "alert-details.all-fields",
            parent: "alert-details",
            url: "/all-fields",
            params: {
                // this will make both links /alert/details & /alert/details/ work
                id: {squash: true, value: null}
            },
            data: {
                pageTitle: "All Alert Fields"
            },
            views: {
                "alertViewDetail@alert-details": {
                    templateUrl: "components/alerts/alert-details/all-fields/all-fields.html",
                    controller: "AlertDetailsAllAlertFieldsController",
                    controllerAs: "vm"
                }
            }
        });

alertDetail.html

<button ng-click="vm.goBack()" class="btn btn-default"><i class="icon icon-long-arrow-left"></i><span translate>Back</span></button>

alertDetail.controller.js

vm.goBack = function () {
            history.back();
        };

我的目标是在警报详细信息页面中实现后退按钮，这样，无论我在哪个子视图中，如果单击后退按钮，它都会将我引导到警报视图页面。我尝试使用 history.back() 这样做。但它会遍历所有之前的状态，而不是直接路由到 Alert View 页面。 我应该如何利用警报视图页面和警报详细信息页面的状态信息，以实现所需的场景。请帮忙。

Answer 1

您可以将所有状态存储在根范围数组中。

$rootScope.statesInfo = ['alert-details.overview','alert-details.history',....];

当用户按下后退按钮时，检查当前状态并继续前一个状态。

您可以使用以下命令获取当前状态：$state.current.name

很简单，您将比较并返回之前的状态；

angular.forEach($rootScope.statesInfo,function (val,key) {
                        if ($state.current.name == val) {
                          $state.go($rootScope.statesInfo[key-1]);
                        }
                    });

Answer 2

为了解决保存当前 URL 并在以后使用它的问题，我创建了一个服务，它将 URL 的查询字符串作为单个对象接收。然后，当我需要以相同的状态访问该 URL 时，我将使用该查询字符串对象并将其作为参数传递给 $state。 所以 vm.goBack 函数看起来像这样：

vm.goBack = function () {
            $state.go("alert-view", {name: alertHistory.getHistory().name, criteria: alertHistory.getHistory().criteria, sort: alertHistory.getHistory().sort});
        };

我创建的服务是： （功能 （） { “使用严格”；

angular
    .module("app.alerts")
    .service("alertHistory", alertHistory);

alertHistory.$inject = [
    "$location",
    "logger"];



function alertHistory ($location, logger) {
    var historyURL = {
        init: null,
        saveURL: saveURL,
        getHistory: getHistory
    };
    return historyURL;

    function saveURL (urlObj) {
        historyURL.currentURL = urlObj;
    }
    function getHistory () {
        return historyURL.currentURL;
    }
}

})();

在控制器中，我使用 $location.search() 获取查询字符串：

alertHistory.saveURL($location.search());

这可能不是理想的解决方案。但它可以满足我的需要:) 欢迎提出任何建议！