Question

我有一个场景，我有以下嵌套状态结构：

root
  root.item1
  root.item2

root状态有一个模板，显示在子状态中设置的一些变量。它还需要先运行，因为它具有确定将加载哪个子状态的逻辑。

如果root确定需要加载root.item2，则事件流程为：

exec root -> redirect to root.item2 -> exec root.item2

现在，如果此时我们重定向到root.item1，然后按“浏览器返回”按钮，我希望被重定向到root.item2，但相反，它看起来像网址被清除了，你做了根本看不到任何儿童状态。

这是显示问题的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>

Answer 1

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

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

注意：网址：＆＃39; detail1＆＃39; 而非网址：＆＃39; / detail1＆＃39;

希望有所帮助。

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

1 个答案: