Question

我有以下状态配置：

$stateProvider
  .state('customer', {
    url: '/customers',
    templateUrl: 'app/components/customer/templates/main.tpl.html',
    views: {
      'list': {
        templateUrl: 'app/components/customer/templates/list.tpl.html',
        controller: 'ListCtrl as ctrl'
      }
    },
    resolve: {
      customerList: function ($stateParams, CustomerResource) {
        console.log('trying to resolve');
        var list = CustomerResource.list($stateParams);
        return list;
      }
    }
  })

这是主要模板：

<div class="container">
  <div class="row">
    <div ui-view="list" class="col-lg-4"/>

    <div ui-view="details" class="col-lg-8"/>
  </div>
</div>

我在控制台上看到angular正试图解决依赖关系。但是这种依赖关系永远不会被注入到views下的控制器中。我在这里做错了什么？

P.S。当我将views移动到像customer.test这样的子状态时，已按预期注入已解析的依赖项：

 .state('customer.test', {
    url: '/test',
    views: {
      'list@customer': {
        templateUrl: 'app/components/customer/templates/list.tpl.html',
        controller: 'ListCtrl as ctrl'
      }
    }
  })

Answer 1

有a working plunker

这里的问题不是解决问题，而是注入主模板。这应该是州定义：

  .state('customer', {
    url: '/customers',
    //templateUrl: 'app/components/customer/templates/main.tpl.html',
    views: {
      '': { 
        templateUrl: 'app/components/customer/templates/main.tpl.html'
      },
      'list@customer': {
        templateUrl: 'app/components/customer/templates/list.tpl.html',
        controller: 'ListCtrl as ctrl'
      }
    },
    resolve: {
      customerList: function ($stateParams, CustomerResource) {
        console.log('trying to resolve');
        var list = CustomerResource.list($stateParams);
        return list;
      }
    }
  })

所以，有了这些：

.controller('ListCtrl', ['$scope', 'customerList', function ($scope, customerList) { 
  $scope.resolved =  customerList
}])
.factory('CustomerResource', function(){
  return {
    list: function(params){return "Hello world"}
  }
})

我们可以看到这样的列表视图：

<div>
  <h3>list view</h3>
  {{resolved}}
</div>

将显示 Hello world

检查here in action

UI路由器不会将解析后的值注入同一级别的视图中

1 个答案: