Question

我有一个定义了各种不同状态的Angular应用程序。我不希望用户能够使用后退按钮返回到先前的状态，因为它们是模拟的一部分并且它扰乱了模拟流程。

有没有办法可以覆盖浏览器后退按钮，让用户进入模拟的起始状态？

angular.module('participant').config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('simulations', {
            url: '/',
            controller: 'SimulationIndexController',
            templateUrl: '/angular_templates/simulations/index.html',
        })
        .state('simulation.content', {
            // other routes
        });

当用户按下浏览器上的后退按钮时，我想转到'simulations'状态，但我不知道如何完成此操作。

Answer 1

执行状态转换时使用location: 'replace'：

$state.go("simulation.content.state2",{location:'replace'});

通过使用replace选项，各个模拟步骤将不会存储在浏览器历史记录中。当用户点击后退按钮时，用户将被带回到开头而不是之前的内容。

Answer 2

你可以在顶部添加

.run(function($state) {

    $(window).on('popstate', function(event) {
        // This event fires on current history change

        $state.go("simulations");

    }, false);

})

使用Angular UI路由器覆盖后退按钮以转到特定状态

2 个答案: