gpt4 book ai didi

angularjs - Angular - UI 路由器 - 嵌套状态 - 浏览器后退按钮无法按预期工作

转载 作者:行者123 更新时间:2023-12-03 17:47:47 25 4
gpt4 key购买 nike

我有一个场景,我有以下嵌套状态结构:

root
root.item1
root.item2
root state 有一个模板,显示了在子状态中设置的一些变量。它也需要首先运行,因为它具有确定将加载哪个子状态的逻辑。

万一 root确定 root.item2需要加载的事件流是:
exec root -> redirect to root.item2 -> exec root.item2

现在,如果此时我们重定向到 root.item1然后他们按下浏览器后退按钮,我希望被重定向到 root.item2 ,但看起来 url 刚刚被清除,您根本看不到任何子状态加载。

这是一个 Plunker Example这说明了问题。

在 Plunker 中重现问题的步骤:
  • 让它加载 root.item2
  • 点击Go to Detail 1
  • 注意到您在 root.item1
  • 单击浏览器返回按钮
  • 注意您不在 root.item2

  • 已提交 Issue到 UI 路由器的 Gihub 页面。希望能从那里得到一些帮助。

    任何帮助表示赞赏。

    显示问题的代码:

    angular
    .module('historyApp', [
    'ui.router'
    ])
    .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('root', {
    url: '/',
    template: '<h1>Parent</h1> <div>{{vm.title}}</div> <div ui-view></div>',
    controller: function($scope, $state){
    $scope.vm = { title: '' };
    // some conditional login that determines which child state will be loaded:
    var variableChildState = 'root.detail2';
    $state.go(variableChildState);
    }
    })
    .state('root.detail1', {
    url: '/detail1',
    template: '<h1>Detail 1</h1><a ui-sref="root.detail2">Go to Detail 2</a>',
    controller: function($scope, $state){
    $scope.vm.title = 'Set in 1';
    }
    })
    .state('root.detail2', {
    url: '/detail2',
    template: '<h1>Detail 2</h1><a ui-sref="root.detail1">Go to Detail 1</a>',
    controller: function($scope, $state){
    $scope.vm.title = 'Set in 2';
    }
    })

    $urlRouterProvider.otherwise('/');
    }
    ])
    .run(function($rootScope, $location){

    $rootScope.$on('$stateChangeStart',
    function (event, toState, toParams){
    console.log(toState)
    });
    })
    ;
    <!DOCTYPE html>
    <html ng-app="historyApp">

    <head>
    <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
    </head>

    <body>
    <div ui-view=""></div>
    </body>

    </html>

    最佳答案

    我认为这是一个简单的语法解决方案:

    .state('root.detail1', {
    url: 'detail1',
    template: '<h1>Detail 1</h1><a ui-sref="root.detail2">Go to Detail 2</a>',
    controller: function($scope, $state){
    $scope.vm.title = 'Set in 1';
    }
    })

    通知: 网址:“详细信息1”而不是网址:'/detail1'

    希望有帮助。

    关于angularjs - Angular - UI 路由器 - 嵌套状态 - 浏览器后退按钮无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29683176/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com