角嵌套视图未加载

Question

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

我的HTML简单如下所示：

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

然后在home.html我尝试加载日历视图：

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

一切正常，除了未加载日历视图。 这里做错了什么？

Answer 1

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

Answer 2

在这种情况下，您尝试找到名称为“ calendar”的ui-view与名称为“ header”的ui-view处于同一级别。 但是，在这个级别上，您只有下一个

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

因此，未命名视图和标题视图，而不是日历。

当您使用日历视图加载“主页”时，此视图添加到主页视图中，而不是同一级别。

因此，您至少可以：

1. 将日历视图直接移动到“ app.home”状态，或者

2. 在应用程序状态下，使用绝对路径进行查看

    'calendar@app.home': { 

第二种方式的示例：

 // 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>