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

Question

我试图将自己的头缠在ui-router上，并且尝试实现以下逻辑：

• 如果没有状态，请转到状态/ items
• 处理/items ，从服务器检索“项目”列表
• 当收到“ items”时，进入状态/items/:item ，其中“ item”是项目列表中的第一个，由服务器返回
• 在/items/:item状态下，呈现一个项目列表，其中相应的“ 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的子items ，因此它也是模板。 因此，子模板期望将父ui-view加载到其中。

如果您希望将子视图替换为父视图， items.current的配置更改为以下内容：

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