控制器没有加载$ statechange

Question

我目前正在开发投票应用，用户必须投票选出10个类别中的最佳商品。这必须以手风琴形式呈现，这意味着每个投票部分必须有自己的div /元素，以便ng-leave和ng-enter在不同的地方/ div进行动画处理。

问题
一切都在加载时工作正常，但是当改变状态时，状态控制器不被调用。例如，如果我启动浏览器app/#/voting/time一切都很完美！但当 调用ui-sref="voting.store"或$state.go('voting.store') ...网址更改，模板加载，$ statechangesuccess $发出，但新状态的控制器无法执行。

这是JS：

angular.module('food', [ 
    'ngResource', 'ngAnimate', 'ui.router', 'ngSanitize',
    'food.voting', 'food.email', 'food.thankyou', 'app-templates'
])

angular.module('food.voting', [
    'foodAndDrink.voting.services', 'foodAndDrink.voting.states', 
    'foodAndDrink.voting.controllers'
]);

angular.module('food.voting.states', [])
    .config(function($stateProvider) {
        $stateProvider.state('voting', {
            url: "/voting",
            templateUrl: "voting/vote-page-wrapper.tpl.html",
            controller: "Voting"
        })
        .state('voting.time', {
            url: "/time",
            parent: 'voting',
            votingSectionName: "Time-Saver",
            voteViewName: 'timesaverview',
            views: {
                'timesaverview@voting': { 
                    controller: "Voting.Time",
                    templateUrl: 'voting/vote-section.tpl.html'
                }
            }
        })
        .state('voting.store', {
            url: '/store',
            parent: 'voting',
            votingSectionName: "Store Essential",
            voteViewName: 'cupboardessentialview',
            views: {
                'cupboardessentialview@voting': { 
                    templateUrl: 'voting/vote-section2.tpl.html',
                    controller: "Voting.Store"
                },
            }
        })
    });

angular.module('food.voting.controllers', [])
    .controller('Voting', ['$scope', '$state', 'UserData', function(,$scope, $state, UserData){
        $scope.products = {};
        $scope.savedvotes = {};
        $scope.currentStageNum = undefined;
        $scope.votingChildStates = [];
        $scope.state = {};
        var allStates = $state.get();

        for (var i=0; i < allStates.length; i++){
            if( allStates[i].name.indexOf('voting.') >= 0 ) $scope.votingChildStates.push( angular.extend(allStates[i]) );
        }

        for(var i=0; i < $scope.votingChildStates.length; i++){
            //get current stage number
            if( $scope.votingChildStates[i].name === $state.current.name ) $scope.currentStageNum = i;
        }


        $scope.getSectionProducts = function(savename, ngResourceService){
            if($scope.products[savename]){
                $scope.products.listingItems = $scope.products[savename];
            }else{
                ngResourceService().query()
                    .$promise.then(function(products){
                        $scope.products.listingItems = $scope.products[savename] = products;
                });
            }
        };

    }])

    .controller('Voting.Time', ['$scope', 'ProductFactory', 'ImageSaveLocation', 
        function($scope, ProductFactory, ImageSaveLocation){
            console.log('time controller loaded');
            $scope.voteSavename = 'time';
            $scope.imgSaveDir   = ImageSaveLocation.timeSaver();
            $scope.getSectionProducts($scope.voteSavename, ProductFactory.timeSaver);

    }])

    .controller('Voting.Store', ['$scope', 'ProductFactory', 'ImageSaveLocation', 
        function($scope, ProductFactory, ImageSaveLocation){
            console.log('store controller loaded');
            $scope.voteSavename = 'store';
            $scope.imgSaveDir   = ImageSaveLocation.cupboardEssesntials();
            $scope.getSectionProducts($scope.voteSavename, ProductFactory.storeCupboardEssesntials);
    }])

父状态的模板html：

<div class="voting">
    <form name="sectionVoteForm" novalidate>

        <div class="text-center">
            <hgroup>
                <h2>Step {{(currentStageNum + 1)}} of {{votingChildStates.length}}</h2>
                <h3 class="hidden-xs">{{$state.current.votingSectionName}}</h3>
            </hgroup>

            <nav class="section-indicators hidden-xs">
                <a ui-sref="{{voteSection.name}}" ng-repeat="voteSection in votingChildStates" 
                ng-class="{current: $state.is(voteSection.name), 'pristine': voteSection.voteValid == undefined, invalid: voteSection.voteValid == false }"></a>
            </nav>
        </div>

        <div ng-repeat="voteSection in votingChildStates" class="votesection" ng-class="{'active-form': $state.is(voteSection.name)}">
            <ng-form name="vote">
                <div ui-view="{{voteSection.voteViewName}}" ng-class="{'back': state.back}"></div>
            </ng-form>
        </div>


        <p class="disclaimer">You must be 18 and stuff blah blah blah</p>
    </form>
</div>

注意：
当我为每个类别手动列出10个div而不是ng-repeat时，它可以工作。根据{{​​3}}，允许动态ui-views，例如<div ui-view="{{expression}}"></div>