Is it possible to nest a ui-view in another ui-view using ui-router

Question

I have a post ui-view in which I would like to nest another comment ui-view within the same state (app). All views have the same controller as well.

How will I target a ui-view (comment inside the post ui-view) without using a child state. A child state would require a user to navigate to that state to view comments, I would like the posts and comments to visible as soon as a user navigates to the home page.

<!-- 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',
            }
        }
      })
  }
]);

Did you google "ui router nested views"? github.com/angular-ui/ui-router/wiki/… — David Spence
– David Spence, Commented Apr 23, 2016 at 18:57
@DavidSpence, I did. I can't find a nesting of views similar to my needs. — Stalin Kay
– Stalin Kay, Commented Apr 23, 2016 at 19:03

Chris Stanley · Accepted Answer · 2016-04-23 19:26:21Z

2

Per ui-router docs, you can utilize multiple views on the same page or nested views. What you have there is 2 views on the same page, in which you'll need multiple named views.

If you're wanting a view inside a view, you'll want to use the first link, where you can just use ui-view, but you have to put the second ui-view on the template of the first ui-view.

You can't put another ui-view inside the div of another ui-view. Your best option is to give them id's and then style them with css. Or if you're wanting, say, comments on a post, you'll actually want to use the second one where you create the post template, and then put a ui-view on that page for the comments.

answered Apr 23, 2016 at 19:26

Chris Stanley

2,9663 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

misss-popcorn · Accepted Answer · 2016-04-23 19:30:08Z

0

 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',
            }
        }
      })
  }
]);

edited Apr 23, 2016 at 19:30

answered Apr 23, 2016 at 18:53

misss-popcorn

6103 silver badges14 bronze badges

1 Comment

Stalin Kay Over a year ago

Thank you for your answer but please check my updated question to get a better idea about what I'm shooting for.

xsee · Accepted Answer · 2016-04-25 00:08:23Z

0

From your sample you just want to reuse the comment html repeatedly within the post html. In this case you would just use ng-include to include a partial (the comment html). See ng-include in the angularjs docs. Nothing to do with ui-router.

Your ui-view maps to the post html and includes your controller. Your post html includes the comment html repeatedly.

Hope that helps

answered Apr 25, 2016 at 0:08

xsee

1,1631 gold badge10 silver badges12 bronze badges

1 Comment

Stalin Kay Over a year ago

Thank you for your answer. I think this will work. Another idea is to use 1 state and with child states that don't change the parent states url. Then every time the home page is visited it navigates to the appropriate child state.

Collectives™ on Stack Overflow

Is it possible to nest a ui-view in another ui-view using ui-router

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related