是否可以使用UI路由器在另一個UI視圖中嵌套UI視圖

Question

我有一個職位UI視圖，我想在同一個州（app）中嵌套另一個註釋UI-VIEW 。所有視圖都具有相同的控制器。

我將如何在不使用子狀態的情況下定位ui-view（在ui-view後面的註釋）。孩子狀態需要用戶導航到該狀態以查看評論，我希望用戶導航到主頁時立即看到帖子和評論。

<!-- 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

每ui-router docs，你可以利用同一個頁面或嵌套視圖上多個視圖。你在那裏有兩個意見在同一頁面上，你需要多個named views。

如果你想要一個視圖中的視圖，你要使用第一個環節，在那裏你可以只使用ui-view，但你必須把第二ui-view第一ui-view的模板。

您不能將另一個ui-view放在另一個ui-view的div內。你最好的選擇是給他們身份證，然後用CSS來設計他們。或者，如果您想對帖子發表評論，則實際上您會希望使用第二個帖子創建帖子模板，然後在該頁面上放置一個ui-view以供評論。

Answer 3

從您的示例中，您只是希望重複使用html內的註釋html。在這種情況下，您只需使用ng-include來包含一個部分（註釋html）。請參閱angularjs文檔中的ng-include。與ui路由器無關。

您的ui-view映射到發佈html幷包含您的控制器。您的發佈html包含評論html多次。

希望可以幫到