AngularJS UI-Router: Rendering parent partial with child partial

Question

I'm using the UI-Router framework for AngularJS in order to render nested partials. I'm having problems with rendering a parent partial with its child partial. Here is my code:

window.app.config(['$stateProvider', '$urlRouterProvider', 
  function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('class', {
        url: '/classes/:classId',
        templateUrl: '/views/class.html',
        controller: 'ClassCtrl',
    })
      .state('class.questionList', {
        url: '',
        templateUrl: '/views/questionList.html',
      })
  }]);

In the declaration of my child-state, I set the url to an empty string so that it would render at the same time as its parent. However, this is not working, only the parent view is rendering.

teisnet · Accepted Answer · 2013-09-25 03:51:10Z

2

Add the property "abstract: true" to the parent state, to inform UI-Router that this state can only be activated through the activation of a child state. This will make the URL /classes/:classId activate both states.

edited Sep 25, 2013 at 3:51

answered Sep 25, 2013 at 3:45

teisnet

881 silver badge5 bronze badges

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

1 Comment

user2066880 Over a year ago

oh easy! thanks much, I must have overlooked that in the documentation

Chandermani · Accepted Answer · 2013-09-24 08:49:18Z

1

Having child state implicitly means that you want to navigate to that state from an existing state and this should update the url that matches the state.

From your route it looks like you want do show something in a ui-view of class.html, but do not want the state to change to child. Better to use ng-include which would serve the purpose nicely

In you class.html, where you have added ui-view use ng-include

<ng-include src="'/views/questionList.html'"></ng-include>

answered Sep 24, 2013 at 8:49

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

4 Comments

user2066880 Over a year ago

I considered using ng-include, however in the very near future I'd like to be able to dynamically swap out the child view with another view. From what I've learned, I wouldn't be able to do this with ng-include right?

Chandermani Over a year ago

You are right, but how this state view work is that they too look at url to decide when the state changed. Look at ui-view documentation, abstract view are also there, those may help you. Basically there should be a way to differentiate when you are on a parent view only and when you are on parent->child view. In your case the router cannot differentiate.

user2066880 Over a year ago

ok gotcha. so I think another solution would be to just pass a url to the class.questionList state and redirect the original url to that one?

Chandermani Over a year ago

Yes there should be something in the url property for child state.

Collectives™ on Stack Overflow

AngularJS UI-Router: Rendering parent partial with child partial

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related