Angular ui-routerは継承を解決します

Question

私は、ajaxサーバコールで現在のユーザを解決し、このオブジェクトを子の状態に渡すという、ただ1つのジョブしか持たない抽象的な親状態を作成したいと考えています。問題は、子の状態が決して読み込まれないことです。このplunkerを見てください。この例ではExample

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状態がNEVます私は本当に理由を理解していない。 parent: 'main'行を削除するとテンプレートが表示されますが、もちろんHomeControllerにuserの依存関係が見つからないため、エラーが発生します。

私には何が欠けていますか？私はui-routerのドキュメントに書かれているようなことをすべてやったが、これはうまくいくはずだ。

Answer 1

その子のためにテンプレートにおけるターゲットUIビューを持っている必要がありますすべての親

$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）