angularjs – Angular – UI路由器 – 嵌套状态 – 浏览器返回按

发布时间：2020-12-17 18:04:08 所属栏目：安全来源：网络整理

导读：我有一个场景,我有以下嵌套状态结构： root root.item1 root.item2 根状态有一个模板,显示在子状态中设置的一些变量.它还需要首先运行,因为它具有确定将加载哪个子状态的逻辑. 如果root确定需要加载root.item2,则事件流是： exec root - redirect to root.it

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

root
  root.item1
  root.item2

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

如果root确定需要加载root.item2,则事件流是：

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

现在,如果此时我们重定向到root.item1并按下浏览器后退按钮,我希望被重定向到root.item2,但它看起来像url刚被清除,你看不到任何子状态被加载所有.

这是一个显示问题的Plunker Example.

在Plunker中重现问题的步骤：

>让它加载root.item2
>单击转到详细信息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>',$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>',$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',$state){
        $scope.vm.title = 'Set in 1';
    }
  })

注意：url：’detail1’而不是url：’/ detail1′

希望有所帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!