javascript - Angular ui-router解析继承

Question

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

状态

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('/');
  });

工厂

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' 行，那么它会显示模板，但是我当然会收到一个错误，因为它在 中找不到 user 依赖项家庭 Controller 。

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

Answer 1

每个 parent 都必须在其 child 的模板中有一个目标 ui-view

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

注意:另一种选择是使用绝对名称和目标 index.html .. 但在这种情况下，上面是要走的路 ( Angularjs ui-router not reaching child controller )