是否可以使用ui-router将ui-view嵌套在另一个ui-view中

Question

我有一个帖子ui-view，我希望在同一个州（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

每ui-router docs，您可以在同一页面或嵌套视图上使用多个视图。您拥有的内容在同一页面上有2个观看次数，您需要多个named views。

如果您想要在视图中使用视图，那么您将要使用第一个链接，您只需使用ui-view，但您必须放置第二个ui-view }在第一个ui-view的模板上。

您无法将另一个ui-view放入另一个ui-view的div中。你最好的选择是给他们id，然后用css设置他们的样式。或者，如果您想要对帖子发表评论，那么您实际上想要使用创建帖子模板的第二个，然后在该页面上放置ui-view以获得评论

Answer 2

 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 3

从您的示例中，您只想在post html中重复使用注释html。在这种情况下，您只需使用ng-include来包含部分（注释html）。请参阅angularjs文档中的ng-include。与ui-router无关。

您的ui-view映射到post html并包含您的控制器。你的帖子html反复包含评论html。

希望有所帮助