Question

我正在使用UI路由器，并且正在尝试更新顶部导航栏中的链接，以便用户可以选择返回＆＃39; - 然而，不一定是他们刚刚来自的地方，而是合乎逻辑的倒退。即如果他们在客户编辑页面中，后退按钮会将他们带到客户列表，与任务等相同。

导航栏是＆＃39; root＆＃39;的一部分。已定义的状态 - 请参阅下面的 top-toolbar @ root 。

.state('root', {
    abstract: true,
    url: '',
    views: {
        '@': {
            templateUrl: '../partials/icp_index.html',
            controller: 'AppController as AppCtrl'
        },
        'left-nav@root': {
            templateUrl: '../partials/left-nav.html'
        },
        'right-nav@root': {
            templateUrl: '../partials/right-nav.html'
        },
        'top-toolbar@root': {
            templateUrl: '../partials/toolbar.html'
        }
    }
})

在我的其他状态中，我通过params选项填充backButton对象。

.state('root.tasks.detail', {
    url: '/:taskId/edit',
    views: {
        'content@root': {
            templateUrl: '../partials/edit-task.html',
            controller: 'TaskDetailController as TaskDetailCtrl'
        }
    },
    params: {
        backButton: {
            text: 'Tasks',
            route: 'root.tasks'
        }
    }
})

在我的应用运行方法中，我调用自定义服务，如下所示：

.run(function($rootScope, NavigationService) {
    $rootScope.$on("$stateChangeError", console.log.bind(console));
    $rootScope.$on("$stateChangeSuccess", function() {
        $rootScope.backButton =  NavigationService.updateBackButton();
    });
})

这是服务：

.service('NavigationService', function() {
    this.updateBackButton = function($state) {
        var backButton = $state.params.backButton;
        return backButton;
    }
})

在工具栏中，我使用backButton对象的route属性来定义ui-sref，如下所示：

ui-sref="{{ backButton.route }}"

但是，backButton对象似乎没有更新。每次状态更改时，服务肯定会运行 - 记录控制台以进行检查。

奇怪的是，当浏览到以下状态时，代码可以正常工作 - 但不是我的任何其他多种状态：

.state('root.clients.dashboard', {
    url: '/:clientId/dashboard',
    views: {
        'content@root': {
            templateUrl: '../partials/client-dashboard.html',
            controller: 'ClientDetailController as ClientDetailCtrl'
        }
    },
    params: {
        backButton: {
            'text' : 'Clients',
            'route' : 'root.clients'
        }
    }
})

我很欣赏可能有更好的方法来做到这一点，并且可能没有使用$ rootScope - 名称本身让我觉得我不应该改变它的属性！

非常感谢任何帮助。

Answer 1

事实上，使用$ rootScope有一个简单的解决方案：

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) {
        $rootScope.previousState = from;
    });
  }]);

rootScope只是主要的母范围，所以不要害怕玩它。您也可以使用以前状态的本地存储执行相同的操作

Angular中的自定义后退按钮与UI-Router

1 个答案: