Angular 1 Ui-router - 过渡到下一个子兄弟姐妹
Angular 1 Ui-router - transition to next child sibling
我无法从 ui-router 的文档中了解如何使用 $state.go()[=14= 有效地在同级状态之间转换]
考虑一个子状态,其 url 是基于整数的:
/parent/1、parent/2、parent/3 等
我需要使用后退和下一步按钮在子状态之间导航。
工作原理(routes.js):
// child states: /parent/1, /parent/2, /parent/3 etc
{
name: '3-INT-TOTM.detail',
url: '/:slide_id',
templateUrl: 'app/html-partials/part-1/3-int.detail.html',
params: {
score: null
},
controller: function ($scope, $stateParams, $log, $location, $state) {
// sorts active slide from parent controller slides based on $stateParams
$scope.slide = $scope.slides[$stateParams.slide_id];
// Navigation
$scope.nextSlide = function () {
$state.go(''); // <-- what goes in here to go forward a child
// i.e if I'm here: /parent/2 and I want to go to /parent/3?
可能是这样的:
$state.go('3-INT-TOTM.detail'[$stateParams.slide_id] +1 );
^肯定是错的,但你可以看到我要去哪里。
在互联网上认真挖掘后自己发布答案:
{
name: '3-INT-TOTM.detail',
url: '/:page',
templateUrl: 'app/html-partials/part-1/3-int.detail.html',
params: {
score: null,
page: {
value: '0',
squash: true
}
},
controller: function ($scope, $stateParams, $log, $location, $state) {
$scope.page = parseInt($stateParams.page, 10);
$scope.slide = $scope.slides[$stateParams.page];
// Navigation
$scope.prevSlide = function () {
$state.go('.', {page: $scope.page - 1});
};
$scope.nextSlide = function () {
$state.go('.', {page: $scope.page + 1});
};
摘自一篇关于这种路由 $state 东西的精彩文章 -->
http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/
我无法从 ui-router 的文档中了解如何使用 $state.go()[=14= 有效地在同级状态之间转换]
考虑一个子状态,其 url 是基于整数的: /parent/1、parent/2、parent/3 等
我需要使用后退和下一步按钮在子状态之间导航。
工作原理(routes.js):
// child states: /parent/1, /parent/2, /parent/3 etc
{
name: '3-INT-TOTM.detail',
url: '/:slide_id',
templateUrl: 'app/html-partials/part-1/3-int.detail.html',
params: {
score: null
},
controller: function ($scope, $stateParams, $log, $location, $state) {
// sorts active slide from parent controller slides based on $stateParams
$scope.slide = $scope.slides[$stateParams.slide_id];
// Navigation
$scope.nextSlide = function () {
$state.go(''); // <-- what goes in here to go forward a child
// i.e if I'm here: /parent/2 and I want to go to /parent/3?
可能是这样的:
$state.go('3-INT-TOTM.detail'[$stateParams.slide_id] +1 );
^肯定是错的,但你可以看到我要去哪里。
在互联网上认真挖掘后自己发布答案:
{
name: '3-INT-TOTM.detail',
url: '/:page',
templateUrl: 'app/html-partials/part-1/3-int.detail.html',
params: {
score: null,
page: {
value: '0',
squash: true
}
},
controller: function ($scope, $stateParams, $log, $location, $state) {
$scope.page = parseInt($stateParams.page, 10);
$scope.slide = $scope.slides[$stateParams.page];
// Navigation
$scope.prevSlide = function () {
$state.go('.', {page: $scope.page - 1});
};
$scope.nextSlide = function () {
$state.go('.', {page: $scope.page + 1});
};
摘自一篇关于这种路由 $state 东西的精彩文章 --> http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/