Angular nested views not loading

Question

I have the following setup using Angular UI Router:

$stateProvider
  .state('app', {
    abstract: true,
    url: '/{retailer:[0-9]}',
    views: {
      'header': {
        templateUrl: '/app/ui/header.html',
        controller: 'HeaderController as header'
      },
      'calendar': {
        templateUrl: '/app/ui/calendar.html',
        controller: 'CalendarController as calendar'
      }
    },
    resolve: {
      RETAILER: getRetailer
    }
  })

  .state('app.home', {
    url: '',
    views: {
      '@': {
        templateUrl: '/app/home/home.html',
        controller: 'HomeController as home'
      }
    }
  });

My HTML simple looks like:

<div ui-view="header"></div>
<div ui-view></div>

Then in home.html I try to load the calendar view:

<div ui-view="calendar"></div>

Everything works except the calendar view is not loading. What is being done wrong here?

Answer 1

您的home.html处于app.home状态，没有“日历”视图

Answer 2

In you case you try found ui-view with name "calendar" on same level as ui-view with name "header". But, on this level you have just next

<div ui-view="header"></div>
<div ui-view></div>

So, unnamed view, and header view, and not calendar.

When you load "home" with calendar view, this view added in home view, instead same level.

So, you have at least to ways:

1. move calendar view to "app.home" state directly, or

2. in app state use absolute path for view

    'calendar@app.home': { 

Sample for second way:

 // Code goes here function getRetailer() { return 10; } angular.module('app', ['ui.router']) .controller('HeaderController', function() { console.log('header'); }) .controller('CalendarController', function() { console.log('calendar'); }) .controller('HomeController', function() { console.log('home'); }) .config(function($stateProvider) { $stateProvider .state('app', { abstract: true, url: '/{retailer:[0-9]}', views: { 'header': { templateUrl: 'header.html', controller: 'HeaderController as header' }, 'calendar@app.home': { templateUrl: 'calendar.html', controller: 'CalendarController as calendar' } }, resolve: { RETAILER: getRetailer } }) .state('app.home', { url: '', views: { '@': { templateUrl: 'home.html', controller: 'HomeController as home' } } }); }); 

 <script data-require="angular.js@1.5.7" data-semver="1.5.7" src="//code.angularjs.org/1.5.7/angular.js"></script> <script data-require="ui-router@0.3.1" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script> <div ng-app="app"> <a ui-sref="app.home({retailer:1})">Go To App</a> <div ui-view="header"></div> <div ui-view></div> <script id="home.html" type="text/ng-template"> Home <div ui-view="calendar"></div> </script> <script id="header.html" type="text/ng-template">Header</script> <script id="calendar.html" type="text/ng-template">Calendar</script> </div>