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

I'm using UI-Router and am trying to update a link in my top navigation bar to give users the option to 'go back' - however, not necessarily where they have just come from, but the logical step backwards. Ie if they are in a client edit page, the back button would take them to the clients list, same with tasks, etc.

我正在使用UI-Router并尝试更新顶部导航栏中的链接,以便用户可以选择“返回” - 但是,不一定是他们刚刚来自的地方,而是向后的逻辑步骤。即如果它们位于客户端编辑页面中,则后退按钮会将它们带到客户端列表,与任务等相同。

The navigation bar is part of the 'root' defined state - see top-toolbar@root below.

导航栏是“根”定义状态的一部分 - 请参阅下面的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'
        }
    }
})

In my other states, I am padding a backButton object via the params option.

在我的其他状态中,我通过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'
        }
    }
})

In my app's run method, I call a custom service, as follows:

在我的应用程序运行方法中,我调用自定义服务,如下所示:

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

And here is the service:

这是服务:

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

And in the toolbar, I use the route property of the backButton object to define the ui-sref as follows:

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

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

However, the backButton object does not seem to update. The service definitely runs each time the state changes - have console logged to check.

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

Strangely, when browsing to the following state, the code works - but not with any of my other mutliple states:

奇怪的是,当浏览到以下状态时,代码可以正常工作 - 但不能与我的任何其他多重状态一起使用:

.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'
        }
    }
})

I appreciate there may be a much better way of doing this, and probably without using $rootScope - the name itself makes me think I should not be changing properties of it!

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

Any help would be much appreciated.

任何帮助将非常感激。

1 个解决方案

#1

In fact there is an easy solution with $rootScope :

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

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

The rootScope is just the main parent scope so don't be affraid to play with it. You could also do the same thing with a local storage for the previous state

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

#1