Angular ui-router 解析继承

Question

我想创建一个抽象的父状态，它只有一项工作：通过 ajax 服务器调用解析当前用户，然后将此对象传递给子状态。 问题是子状态永远不会被加载。 请看看这个plunker：示例

一个state

angular.module('test', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider){

    // Parent route
    $stateProvider.state('main', {
      abstract:true,
      resolve: {
        user: function(UserService){
          return UserService.getUser();
        }
      }
    });

    // Child route
    $stateProvider.state('home', {
      parent: 'main',
      url: '/',
      controller: 'HomeController',
      controllerAs: '$ctrl',
      template: '<h1>{{$ctrl.user.name}}</h1>'
    });

    $urlRouterProvider.otherwise('/');
  });

factory

angular.module('test').factory('UserService', function($q){
  function getUser() {
    var deferred = $q.defer();

    // Immediately resolve it
    deferred.resolve({
      name: 'Anonymous'
    });

    return deferred.promise;
  }

  return {
    getUser: getUser
  };
});

controller

angular.module('test').controller('HomeController', function(user){
  this.user = user;
});

在这个例子中， home状态永远不会显示模板，我真的不明白为什么。 如果我删除parent: 'main'行，那么它会显示模板，但当然我会收到错误，因为它在HomeController找不到user依赖项。

我错过了什么？ 我做了 ui-router 文档中描述的所有事情，我认为这应该可行。

Answer 1

每个父级都必须在其子级模板中具有目标 ui-view

$stateProvider.state('main', {
  abstract:true,
  resolve: {
    user: function(UserService){
      return UserService.getUser();
    }
  }
  template: '<div ui-view=""></div>'
});

注意：另一种选择是使用绝对名称和目标 index.html .. 但在这种情况下，上面是要走的路（ Angularjs ui-router 没有到达子控制器）