子状态控制器永远不会执行

Question

我试图绕过ui-router,我试图实现以下逻辑:

• 如果没有州,请转到州/项目
• 处理时/items,从服务器检索"项目"列表
• 当收到"items"时,转到state /items/:item,其中"item"是服务器返回的item列表中的第一个
• 在状态下/items/:item呈现一个项目列表,相应的"项目"被"突出显示"(突出显示部分不包含在我的代码中)

但是,不执行子状态的"控制器"功能.我打赌这是非常明显的事情.

这是js(我也在plunkr上有附带的模板).

angular.module('uiproblem', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
         function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/items');
    $stateProvider
    .state('items', {
        url: '/items',
        resolve: {
            items: function($q, $timeout){
              var deferred = $q.defer();
              $timeout(function() {
                deferred.resolve([5, 3, 6]);
              }, 1000);
              return deferred.promise;
            }
        },
        controller: function($state, items) {
            // We get to this point successfully
            console.log(items);
            if (items.length) {
                // Attempt to transfer to child state
                return $state.go('items.current', {id: items[0]});
            }
        }
    })
    .state('items.current', {
        url: '/:id',
        templateUrl: 'item.html',
        controller: function($scope, items) {
            // This is never reached, but the I can see the partial being
            // loaded.
            console.log(items);
            // I expect "items" to reflect to value, to which the "items"
            // promise resolved during processing of parent state.
            $scope.items = items;
        }
    });
}]);

Plunk:http://plnkr.co/edit/K2uiRKFqe2u5kbtTKTOH

Answer 1

将此添加到您的items州:

template: "<ui-view></ui-view>",

UI-Router中的状态是分层的,他们的视图也是如此.作为items.current一个孩子items,它也是模板.因此,子模板希望ui-view加载父模板.

如果您希望让子视图替换父视图,请将配置更改为items.current以下内容:

{
  url: '/:id',
  views: {
    "@": {
      templateUrl: 'item.html',
      controller: function($scope, items) {
          // ...
      }
    }
  }
}