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

警报详细信息Page.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

您可以将所有状态存储在一个rootcope数组中。

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

我创建的服务是：（function（）{ “使用严格”;

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());

这可能不是理想的解决方案。但它适用于我需要的:)欢迎任何建议！

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

2 个答案: