Angular 1 Ui-router - 过渡到下一个孩子的兄弟姐妹

时间:2016-12-08 13:36:50

标签: javascript angularjs routing angular-ui-router state

我无法从ui-router上的文档中了解如何使用$ state.go()

有效地在兄弟姐妹状态之间转换

考虑一个基于整数的子状态: / 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 );

^肯定是错的,但你可以看到我去的地方。

1 个答案:

答案 0 :(得分:0)

在仔细挖掘互联网后,我自己发布了答案:

{
      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 stuff - &gt; http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/