Question

我正在尝试实现一种可靠的方法来检查用户是在前进还是退回历史堆栈，这将在角度上下文中工作，并通过浏览器后退/前进按钮在其外部工作。

所以基本上，我是否在我的服务中使用$window.history.back()，或者浏览器前进/后退按钮，我想知道我导航的方向。

我已经完成的工作是将我的面板服务连接到Angular ui-router，方法是将一个名为panel的自定义配置对象添加到我想在面板中打开的每个状态。 （如下所示）

app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {

    $stateProvider

    .state('app', {
        url: '/ah',
        abstract: true
    })

    .state('app.test', {
        url: '/test',
        panel: {
            template: '<h1>Test</h1><br /><br /><button data-ng-click="clickMe()">Click Me</button>',
            controller: 'testController'
        }
    });

}]);

我目前正在使用ui-router的$stateChangeStart事件来捕获所述对象，并且如果所述对象存在则适当地打开面板。 （如下所示）

app.run(['$rootScope', '$state', 'PanelService', function ($rootScope, $state, PanelService) {

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

        if (toState.hasOwnProperty('panel')) {

            PanelService.open({
                templateUrl: toState.panel.templateUrl,
                template: toState.panel.template,
                controller: toState.panel.controller,
                title: toState.panel.title,
                scope: event.targetScope,
                resolve: toState.panel.resolve
            });

        }

    });

}]);

但是我遇到了上面提到的问题，我无法可靠地辨别出我是在前进还是在历史堆栈中退回，以便我知道何时打开或关闭面板。

以下是fiddle的实际操作。

我已经尝试过提出更优雅的解决方案，但我正在努力弄清楚最好的解决方法是什么。我的想法是可能扩展/装饰ui-router以添加诸如$onHistoryBack或$onHistoryForward之类的事件？但我还没有找到办法做到这一点。

非常感谢您的建议和指导。

Angular UI-Router：添加自定义事件

0 个答案: