Angular UI router nested views not showing anything

Question

I have been through several similar questions here on this and still cannot figure out what I am doing wrong. I am looking to load a view within a view (which also happens to be within another view).

The code in rules.html is not appearing. Am I misunderstanding the concepts behind ui-router?

In the firefox developer console I am simply getting 

index.html

<body ng-app="App">
   <div class="container" ui-view="container" ></div>
</body>

parent.html

<div>
    //some wrapper stuff
    <div ui-view="parent"></div>
</div>

edit-entity.html

<div ng-controller="ProjectManagerController as data">
        // other code showing fine
        <div ui-view="rules"></div>
        // other code showing fine
</div>

rules.html

<div>TEST CODE</html>

app.js

$stateProvider
    .state('app', {
        views: {
            'container': {
                templateUrl: 'views/parent.html?nd=' + Date.now(),
                controller: 'MainController as data'
            }
        }
    })
    .state('edit-entity', {
        parent: 'app',
        url: '/entity/{id:int}/edit',
        views: {
            'parent': {
                templateUrl: 'views/entity-edit.html?nd=' + Date.now(),
                controller: 'MainController as main'
            }
        }
    })
    .state('rules', {
        parent: 'edit-entity',
        views: {
            'rules': {
                templateUrl: 'views/rules.html?nd=' + Date.now(),
                controller: 'MainController as data'
            }
        }
    });

EDIT: I have also tried rules.entity

Did my solution solve your problem?

Jeff Musser
– Jeff Musser

2017-08-14 02:53:38 +00:00
Commented Aug 14, 2017 at 2:53 — Jeff Musser
– Jeff Musser, Commented Aug 14, 2017 at 2:53

Jeff Musser · Accepted Answer · 2017-08-14 03:15:27Z

1

You need to trace the path in a nested state from the parent state. Edit: I have added a Plunker for your work: http://plnkr.co/edit/mBYdUTEkaLsqhI6MNW4I?p=preview

.state('app', {
  views: {
      'container': {
          templateUrl: 'views/parent.html?nd=' + Date.now(),
          controller: 'MainController as data'
      },
      'container.parent@app': {
          templateUrl: 'views/entity-edit.html?nd=' + Date.now(),
          controller: 'MainController as main'
      }
      'container.parent.rules@app': {
          templateUrl: 'views/rules.html?nd=' + Date.now(),
          controller: 'MainController as data'
      }
   }
});

edited Aug 14, 2017 at 3:15

answered Aug 11, 2017 at 19:13

Jeff Musser

1215 bronze badges

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

2 Comments

Adrian Over a year ago

Thanks but are you sure this is fully correct? Im a bit lost as to why edit-entity is a parent of app and also not sure where this order is coming from container.parent.rules.edit-entity, should it not be container.parent.edit-entity.rules?

Jeff Musser Over a year ago

@Adrian so sorry the parent was a typo. I have updated it

ami91 · Accepted Answer · 2017-08-11 18:50:51Z

0

Can you try if this works -

.state('rules', {
    parent: 'edit-entity',
    views: {
        'rules@edit-entity': {
            templateUrl: 'views/rules.html?nd=' + Date.now(),
            controller: 'MainController as data'
        }
    }
});

I just added the '@' after the view name (absolute naming). You can read more here - https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names. I've found that this works for me sometimes.

edited Aug 11, 2017 at 18:50

answered Aug 11, 2017 at 18:45

ami91

1,3641 gold badge11 silver badges20 bronze badges

1 Comment

Adrian Over a year ago

thanks for the help but unfortunately no joy. I had tried something like that earlier alright. Very strange!

Collectives™ on Stack Overflow

Angular UI router nested views not showing anything

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related