ui-routerを使用してui-viewを別のui-viewにネストすることは可能ですか？

Question

別のコメントui-view を同じ状態の中にネストしたい投稿ui-viewを持っています（app）。すべてのビューには同じコントローラがあります。

子状態を使用せずにui-view（投稿ui-view内のコメント）をどのようにターゲットにしますか？子供状態では、ユーザーがコメントを表示するためにその状態にナビゲートする必要があります。ユーザーがホームページに移動するとすぐに投稿とコメントを表示することができます。 ui-router docsパー

<!-- index.html --> 
<div ui-view="post" ng-repeat="post in posts"> 

</div> 


<!-- posts.html --> 
<div class="post"> 
    <p>{{post.body}}</p> 
    <div ui-view="comment" ng-repeat="comment in post.comments"> 
    </div> 
</div> 

<!-- comments.html --> 
<div class="comment" > 
    <p>{{comment.body}}</p> 
</div> 


app.config(['$stateProvider', 
    function($stateProvider) { 
    $stateProvider 
     .state("app", { 
     url: '/', 
     views: { 
      'posts@app': { 
        templateUrl: 'views/posts.html', 
        controller: 'PostController', 
      } 
     } 
     }) 
    } 
]); 

Answer 1

app.config(['$stateProvider', 
    function($stateProvider) { 
    $stateProvider 
     .state("app", { 
     url: '/', 
     views: { 
      'posts@app': { 
        templateUrl: 'views/posts.html', 
        controller: 'PostController', 
      } 
     } 
.state("app.comments", { 
     url: '/comments', 
     views: { 
      'comments@app': { 
        templateUrl: 'views/comments.html', 
        controller: 'CommentsController', 
      } 
     } 
     }) 
    } 
]); 

Answer 2

、あなたは同じページに複数のビューまたはネストされたビューを利用することができます。あなたが持っているものは同じページに2つのビューがあり、複数のnamed viewsが必要です。

ビュー内のビューを望むなら、あなたはあなただけui-viewを使用することができます最初のリンクを使用したいでしょうが、あなたは最初ui-viewのテンプレートに二ui-viewを配置する必要があります。

別のui-viewのdiv内に別のui-viewを置くことはできません。あなたの最善の選択肢は、それらのIDを与え、CSSでそれらをスタイルすることです。また、投稿のコメントをしたい場合は、実際に投稿テンプレートを作成する2番目のテンプレートを使用して、そのページにui-viewというコメントを入れたいと思うでしょう。

Answer 3

サンプルからは、html内のコメントhtmlを繰り返し再利用したいだけです。この場合、ng-includeを使用して部分（コメントhtml）を含めるだけです。 angularjsドキュメントのng-includeを参照してください。 ui-routerとは関係ありません。

あなたのui-viewは、post htmlにマップされ、コントローラを含みます。あなたのポストhtmlにはコメントhtmlが繰り返し含まれています。

希望すること