角嵌套視圖未加載

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>