CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
velochy
velochy

Reputation: 425

UI-router for child states without nesting

Can you use Angular ui-router to describe page hierarchy where the pages are not nested?

Background:

I am developing a small web app with ~10 separate pages that form a clear hierarchy (i.e. Dashboard -> Student X -> Exercise Y -> Attempt Z ). I would want to be able to express this hierarchy in code, so I could get easy breadcrums and a back-button that preserves the page state (as opposed to reloading). The project already uses UI-router for some sub-views, so it seemed logical to build this hierarchy on top of that as well.

However the problem I ran across is this: ui-router loads a child state into a ui-view INSIDE the parent state, whereas I would like it to load it into the same ui-view tag that the parent was in, INSTEAD of the parent.

My ideal solution would involve me just being able to write an extra parameter replace-parent to the state description such as 

  .state('student.profile', {
    url: '/profile',
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl',
    replace-parent: true
  })

that would then replace the ui-view that the 'student' state was loaded into with the profile page when this state is loaded (and back again, when the child state is unloaded).

Can anyone come up with a way to achieve roughly this result with reasonable means? The best I can think of myself is listening to $stateChange events and then sacrificing a few goats to the JQuery allmighty, but I really hope there is a pretty, angular way of doing it.

Upvotes: 1

Views: 351

Answers (1)

martinoss
martinoss

Reputation: 5458

I just run into a similar issue where I want to express a hierarchy for a progress tracker. Seems that UI Router does not support nested states without nesting the views.

I tend to solve it like this:

.state('student', {
    url: '/student',
    templateUrl: 'views/student.html',
    controller: 'StudentCtrl'
})    
.state('studentProfile', {
    url: '/student/profile',
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl'
})

Note that the states stay flat, but the url has a hierarchy. This way, no view-nesting is required, but it requires you add more work in your breadcrumb directive/code.

I'm still looking for a better solution too.

Upvotes: 3

Related Questions