Question

我试图绕过ui-router，我试图实现以下逻辑：

如果没有州，请转到州/项目
处理/items时，从服务器
收到“项目”时转到状态/items/: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;
        }
    });
}]);

普兰克：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) {
          // ...
      }
    }
  }
}

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

1 个答案: