Angular ui routers nested ui-views not working

Question

I'm trying to create a simple nested route within angular and whenever a nested route occurs the view doesn't pop up

With a path of http://localhost:9000/#/home/hello I still only see homeHello

Why isn't the nested ui view picking up the home.hello template?

Rendered HTML

<section ui-view="" class="ng-scope">
  <section class="home ng-scope">
    home
    <a ui-sref=".hello" href="#/home/hello">Hello</a>
    <!-- uiView: ui-view -->
    <div ui-view="ui-view" class="ng-scope"></div>
  </section>
</section>

Angular Ui Router

// app.js

angular.module('spoonFeeder',
  ['ui.router',
   'ngAnimate',
   'ngCookies',
   'ngResource',
   'ngSanitize',
   'ngTouch'])

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $urlRouterProvider.otherwise('/home')

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home/home.html'
        })
        .state('home.hello', {
            url: '/hello',
            templateUrl: 'home/hello.html'
        })

        // use the HTML5 History API
        // $locationProvider.html5Mode(true);
});

Views

<!-- home/home`.html -->
<section class="home">home<a ui-sref=".hello">Hello</a>
  <div ui-view="ui-view"></div>
</section>

<!-- home/hello.html -->
<section class="hello">Hello</section>

Your ui-sref on your child state should include the parent. e.g. ui-sref="home.hello" AFAIK — Christopher Marshall
– Christopher Marshall, Commented Jul 21, 2014 at 22:04
It doesn't need to this is relative pathing. even with it on there it doesn't work — MikaAK
– MikaAK, Commented Jul 21, 2014 at 22:21

Radim Köhler · Accepted Answer · 2014-07-22 03:58:28Z

There is a plunker with a working example. What I changed was: "extending of the parent template"

<section class="home">home
  <a ui-sref=".hello">Hello</a>
  <div ui-view="ui-view"></div>
  <div ui-view=""></div>      <!-- new line -->
</section>

The new element div does contain also attribute ui-view, but in this case, it is unnamed so this state definition can find it:

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

To show, how we can target the first one ui-view="ui-view", which is in fact named, there is new state Hello2:

.state('home.hello2', {
  url: '/hello2',
  views : {
    'ui-view' : {
      templateUrl: 'tpl.hello2.html',
    }
  }
})

and this state, is now really targeting the named ui-view="ui-view, because it uses explicit views {} defintion. The state hello, on the other hand uses implicit views definition which could be expressed like this:

  views : {
    '' : { // targeting unnamed ui-view=""
      templateUrl: 'tpl.hello2.html',
    }
  }

Check it here

Collectives™ on Stack Overflow

Angular ui routers nested ui-views not working

Rendered HTML

Angular Ui Router

Views

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Rendered HTML

Angular Ui Router

Views

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related