CODEWITHSUNDEEP
angularjsangular-ui-router
Adrian
Adrian

Reputation: 2012

Angular UI router nested views not showing anything

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 <!-- uiView: rules -->

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

Upvotes: 0

Views: 291

Answers (2)

Jeff Musser
Jeff Musser

Reputation: 121

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'
      }
   }
});

Upvotes: 1

ami91
ami91

Reputation: 1354

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.

Upvotes: 0

Related Questions