我有一个场景,我有以下嵌套状态结构:
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/