UI Router is not injecting resolved value into views at the same level

问题

I have the following state configuration:

$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;
      }
    }
  })

Here is the main template:

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

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

I see on the console that angular is trying to resolve the dependency. But this dependency is never injected into the controller under views. What am I doing wrong here?

P.S. When I move views to some child state like customer.test the resolved dependency is injected as expected:

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

回答1:

There is a working plunker

The problem here is not with resolve, but with the injection of the main template. This should be the state definition:

  .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;
      }
    }
  })

so, with these in play:

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

we can see that list view like this:

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

will show Hello world

Check it here in action

来源：https://stackoverflow.com/questions/32309724/ui-router-is-not-injecting-resolved-value-into-views-at-the-same-level

标签

angularjs

state

angular-ui-router