Vivek Vivek - 6 months ago 28
AngularJS Question

Angular: Nested state not working in UI-Router

Multilevel nesting is not working in ui-router. I have added "ui-view" inside a template named as "tpl.hello.html" which is a template of state "home.hello". This "home.hello" state is a child state of "home" state. After that i've added following state in stateprovider:

.state('home.hello.test', {
url: '/test',
templateUrl: 'tpl.hellonested.html'
})


But this "home.hello.test" state does not load up inside "home.hello" state.

Here is the plunkr for a look.

Answer

I didnt see any problem, and based on your plunkr, your routes are

-Home
   *Home.Home1
      >Home.Home1.Test
   *Home.Home2

So if you go to "Home.Home1", it will NOT load "Home.Home1.Test", but if you load "Home.Home1.Test", it will also load all its parent states. Here is a plunkr (just modified it a little).