Dmi*_*try 5 angularjs angular-ui-router
我有一个场景,我有以下嵌套状态结构:
root
root.item1
root.item2
该root州有显示,在孩子的状态设置一些变量的模板.它还需要首先运行,因为它具有确定将加载哪个子状态的逻辑.
如果root确定root.item2需要加载事件流,则:
exec root -> redirect to root.item2 -> exec root.item2
现在,如果此时我们重定向到root.item1他们按下浏览器后退按钮,我希望被重定向到root.item2,但它看起来像url被清除,你根本看不到任何子状态.
这是一个显示问题的Plunker示例.
在Plunker中重现问题的步骤:
root.item2Go to Detail 1root.item1root.item2将提交的问题提交到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';
}
})
注意：url: 'detail1'而不是 url: '/detail1'
希望有帮助。
| 归档时间： |
|
| 查看次数： |
2730 次 |
| 最近记录： |