UI-Router nested view not working

Question

I am trying to create nested view with angular breadcrumb ... and here the problem is in state app.input1.input2 its own template input2 is not loading.. its only loading app.input1 continuously...

If I try to give wrong templateUrl in app.input1.input2 then it throws error back but when I give correct path then its not loading same template and any error .. it just loading same template of app.input1

Suggest me some idea why that template is not loading?

#app.js

$stateProvider
    .state('app', {
        abstract: true,
        url: '/app',
        templateUrl: 'view/abc.html',
        data: {
        breadcrumbProxy: 'app.start'
        }
    })

    .state('app.start', {
        url: '/start',
        templateUrl: 'view/start.html',
        data: {
            displayName: 'start',
          }
    })        

    .state('app.input1', {
        url: '/input1',
        templateUrl: 'view/input1.html',
          data: {
            displayName: 'input1',
          }
    })

    .state('app.input1.input2', {
        url: '/input2',    
        templateUrl: 'view/input2',
          data: {
            displayName: 'input2',
          }
    });
$urlRouterProvider.otherwise('app.start');

index.html

<div ui-view></div>

abc.html

<div ui-view></div>

start.html

<div>
    <a ui-sref="app.input1">Input1</a>
</div>

input1.html

<div>
    <a ui-sref="app.input1.input2">Input2</a>
</div>

input2.html

<div>bla bla bla bla</div>

Radim Köhler · Accepted Answer · 2014-11-14 04:32:16Z

4

Here is a working plunker. Change made is here:

input1.html

<div>
    <a ui-sref="app.input1.input2">Input2</a>
    <div ui-view></div> // anchor for child
</div>

The input2 is a child state of input1. So we need to create an anchor/target for it. Check the plunker here

Also, I used this as otherwise:

$urlRouterProvider.otherwise('/app/start');

answered Nov 14, 2014 at 4:32

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

3 Comments

bijay Over a year ago

thankyou for you plnkr.. but still one more question... here's my plnkr.. plnkr.co/edit/EGhFEVgMKHsa9c5ZapOQ?p=preview .. actually i wanna ve those breadcrumb same as input1/input2 .. and i want to show only input2 template below... i dont want input2 tag in that view.... how can i remove that??

Radim Köhler Over a year ago

Here you are: plnkr.co/edit/EGhFEVgMKHsa9c5ZapOQ?p=preview. Change is only script.js and the input2 def. If you want to understand what happend, check this or this ... ;) Good luck with the UI-Router

Radim Köhler Over a year ago

Ooops. plnkr.co/edit/CQNjsRyyMaD8s1D0NT9L?p=preview this is the proper link to updated plunker. Reaaaaally sorry. wrong copy paste. Really sorry ;(

Collectives™ on Stack Overflow

UI-Router nested view not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related