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

标签 angularjs angular-ui-router

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

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/

    相关文章:

    javascript - 如何使用具有不同内容的相同警报(?)

    AngularJS重新初始化 Controller

    angularjs - Angular UI 路由器和使用动态模板

    angularjs - 使用 ui-router 包含特定 css/js 文件的最佳方法

    angularjs - 在 ui-router 中使用 "bool"参数类型的正确方法是什么?

    javascript - 如何使用 Angular 指令切换可拖动

    javascript - AngularJS : Replicate div on click of button

    javascript - 仍在向被破坏的 Controller 范围 Angularjs 广播

    javascript - ng-submit 未执行

    javascript - UI路由器改变状态而不改变url