Ist es möglich, einen ui-view in einer anderen ui-view mit ui-router zu verschachteln

Question

Ich habe eine post ui-view in der ich einen weiteren kommentar ui-view im gleichen zustand (app) verschachteln möchte. Alle Ansichten haben denselben Controller.

Wie soll ich ein UI-View (Kommentar in der Post UI-View) Ziel ohne einen Kind-Status. Ein untergeordneter Status würde erfordern, dass ein Benutzer zu diesem Status navigiert, um Kommentare anzuzeigen. Ich möchte, dass die Posts und Kommentare sichtbar sind, sobald ein Benutzer zur Startseite navigiert.

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

Per ui-router docs, können Sie mehrere Ansichten auf derselben Seite oder verschachtelte Ansichten nutzen. Was Sie dort haben, ist 2 Ansichten auf der gleichen Seite, in denen Sie mehrere named views benötigen.

Wenn Sie einen Blick in einer Ansicht zu wollen, möchten Sie den ersten Link verwenden, wo man nur ui-view verwenden können, aber Sie haben die zweite ui-view auf der Vorlage des ersten ui-view zu setzen.

Sie können keinen weiteren ui-view innerhalb der div von einem anderen ui-view setzen. Ihre beste Wahl ist, ihnen Ids zu geben und sie dann mit CSS zu stylen. Oder wenn Sie beispielsweise Kommentare zu einem Beitrag wünschen, möchten Sie den zweiten Artikel verwenden, auf dem Sie die Postvorlage erstellen, und dann auf dieser Seite einen ui-view für die Kommentare einfügen.

Answer 3

Von Ihrem Beispiel möchten Sie nur wiederholt den Kommentar html innerhalb des Post-HTML wiederverwenden. In diesem Fall würden Sie einfach ng-include verwenden, um eine partielle (den Kommentar HTML) aufzunehmen. Siehe ng-include in den Angularjs-Dokumenten. Nichts mit dem UI-Router zu tun.

Ihre UI-View-Maps auf den Post-HTML und enthält Ihren Controller. Ihr Post-HTML enthält den Kommentar html wiederholt.

Hoffe, dass hilft