CODEWITHSUNDEEP
angularjsangular-ui-router
Zafar Iqbal
Zafar Iqbal

Reputation: 107

multi-level nested states not loading template

I have setup my states as below, as you can see first state is abstract, and all second level states (list, edit and new) loads perfectly, but my third level states (passengers) is not loading, it stays on edit state UI. What I might be doing wrong.

Here is link to plunker, click on contacts, then first contact and you will see a link "messages", if you click on that, it will not change anything.

http://plnkr.co/edit/qclHQg?p=preview

function config($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('trips', {
            parent: 'app',
            abstract: true,
            url: '/trips',
            data: {
                role: ['Administrators']
            }
        })
        .state('trips.list', {
            url: '',
            component: 'tripList'
        })
        .state('trips.trip-edit', {
            url: '/{id:[0-9]+}',
            component: 'tripEdit',
            onEnter: function () {
                console.log("entering trips.trip-edit");
            },
            onExit: function () {
                console.log("exiting trips.trip-edit");
            }
        })
        .state('trips.trip-edit.passengers', {
            url: '/passengers',
            //component: 'tripPassengers', using views below
            views: { '@app': { template: '<trip-passengers />' } },
            onEnter: function () {
                console.log("entering trips.trip-edit.passengers");
            },
            onExit: function () {
                console.log("exiting trips.trip-edit.passengers");
            }
        })
        .state('trips.trip-new', {
            url: '/new',
            component: 'tripNew'
        });
};

@ramon answer was good, but I solved it, modified that by adding views section in passenger state, and my component was automatically wired in.

Upvotes: 1

Views: 104

Answers (1)

Ramon Marques
Ramon Marques

Reputation: 3264

when you are working with angular ui router states you need to understand a concept.

All states will try to render in the parent view, but when you are nesting states you may encounter a problem that there is not that component on the parent view.

For example: your trips.trip-edit state, probably does not have a place to trips.trip-edit.passengers render.

made a fork of your plunker and made it work

http://plnkr.co/edit/wT6rTPAvmfjnrNbt0WFk?p=preview

I'm in a rush here, let me try to explain the relevant parts here.

First of all I changed the index.html ui-view to a 'named view', that's when we pass a name for that ui-view, ui-view="main", so i called it main

Then we have to specify in all our routes (states), where their templates will render, which view.

views: {
  'main' : {
    templateUrl: ...,
    controller: ...
  }
}

notice that in a nested view I had to put an AT (@).

views: {
  'main@' : {
    templateUrl: ...,
    controller: ...
  }
}

That @ tells angular to look for a main starting from your root, because there is nothing after @, it's an absolute path. When you don't use @ it's a relative path. It's better explain here in the docs

So if you want to render a view inside another named view inside about.html for example you could do the following

views: {
  'another@about' : {
    templateUrl: ...,
    controller: ...
  }
}

That would look for ui-view="another" inside about state template, that is about.html

Upvotes: 1

Related Questions