Angular UI 路由器 - 在子状态下共享控制器时为父级重置状态参数

Question

我有一个控制器被两个子状态 (detail.Controller) 使用。

父状态 (QUIZ1 & QUIZ3) 有不同的控制器将不同的数据推送到父范围 (quiz1.Controller & quiz3.Controller)

routes.js:

{
      name: 'QUIZ1',
      abstract: true,
      url: '/quiz1',
      templateUrl: 'app/html-partials/quiz.html',
      controller: require('./app/controllers/quiz1.Controller').inject(angular.module('app', ['ui.router', require('angular-sanitize')]))
    },
    {
      name: 'QUIZ1.detail',
      url: '/:page',
      templateUrl: 'app/html-partials/quiz.detail.html',
      params: {
        page: {
          value: '0',
          squash: true
        },
        score: {
          value: '0',
          squash: true
        },
        timer: {
          value: false,
          squash: true
        }
      },
      controller: require('./app/controllers/detail.Controller').inject(angular.module('app', ['ui.router', require('angular-sanitize')]))
    },
    {
      name: 'QUIZ2',
      // some other state stuff
    },
    {
      name: 'QUIZ3',
      abstract: true,
      url: '/quiz3',
      templateUrl: 'app/html-partials/quiz.html',
      controller: require('./app/controllers/quiz3.Controller').inject(angular.module('app', ['ui.router', require('angular-sanitize')]))
    },
    {
      name: 'QUIZ3.detail',
      url: '/:page',
      templateUrl: 'app/html-partials/quiz.detail.html',
      params: {
        page: {
          value: '0',
          squash: true
        },
        score: {
          value: '0',
          squash: true
        },
        timer: {
          value: false,
          squash: true
        }
      },
      controller: require('./app/controllers/detail.Controller').inject(angular.module('app', ['ui.router', require('angular-sanitize')]))
    },

quiz1.Controller.js:(构建数据的父控制器)

function buildData(resp) {
  $scope.slides = [];

  for (var item in resp.quiz_slides) {
    if (resp.quiz_slides) {
      $scope.slides.push(resp.quiz_slides[item]);
    }
  }
}

detail.Controller.js:（断点出错的部分）：

$scope.slide = $scope.slides[$stateParams.page];

问题：

当我使用 $state.go('QUIZ2') 导航出 QUIZ1.detail 并最终进入 QUIZ3.detail 的页面时，我得到：

angular.js:14328 TypeError: Cannot read property '0' of undefined

这与 $stateParams.page（用于导航）有关，我认为它没有正确重置，因为旧数据可能仍在 $scope 中。

我知道这个 因为立即导航到 QUIZ3 将解析数据并且没有错误。

有没有人有这方面的经验？

Answer 1

好吧，如果有人想知道我是如何解决这个问题的，在把它放在这里和那里并播放给同事之后，我想：“幻灯片的 $rootScope”！

注意： 命名约定与答案略有不同，但你明白了。

我在状态之间引入了一个初始状态，以便它可以正确解析 json 内容并将该状态放入一个名为 .detail 的新子对象中： init-state.js:

exports.inject = function (app) {
  app.controller('sevenIntAFFECTinit.Controller', exports.controller);
  exports.controller.$inject = ['$scope', '$state', '$stateParams', 'jsonPartialService', '$log', '$rootScope'];
  return exports.controller;
};

exports.controller = function sevenIntAFFECTinitCtrl($scope, $state, $stateParams, jsonPartialService, $log, $rootScope) {
  // Do the json in here. Jokes
  $rootScope.slides = [];
  jsonPartialService
    .getJSON('part-1/7-INT-QUIZ-AFFECT')
    .then(function (response) {
      $scope.prevState = response.prev_state;
      $scope.nextState = response.next_state;
      $scope.quizTitle = response.quiz_title;
      buildData(response);
    });
  function buildData(resp) {
    for (var item in resp.quiz_slides) {
      if (resp.quiz_slides) {
        $rootScope.slides.push(resp.quiz_slides[item]);
      }
    }
    $log.debug('after the slides have been pushed in init -->', $rootScope.slides);
    $state.go('7-INT-QUIZ-AFFECT.detail', $stateParams, {reload: true, inherit: false});
  }
};

Angular UI 路由器 - 在子状态下共享控制器时为父级重置状态参数

Angular UI Router - State params reset for parent when sharing controller in child state

javascript

routing

state

angularjs

angular-ui-router