角度UIルータ - 子状態でコントローラを共有するときに親に対して状態パラメータがリセットされる

Question

2つの子状態（detail.Controller）で使用される1つのコントローラがあります。

{ 
     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：

親状態（QUIZ1 & QUIZ3）は、親スコープ（quiz1.Controller & quiz3.Controller）

routes.jsに異なるデータをプッシュ異なるコントローラを持っています。 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：（ブレークポイントがerroringされる部分）：

$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 for slides」と思った！

注：名前付け規則は、回答と少し異なりますが、あなたはそのアイデアを得ます。

それが適切に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}); 
    } 
};