角度嵌套视图未加载

Question

我使用Angular UI路由器进行了以下设置：

$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状态，并且没有日历＆＃39;视图

Answer 2

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

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

所以，未命名的视图和标题视图，而不是日历。

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

所以，你至少有办法：

1. 直接将日历视图移至“app.home”状态，或
应用状态中的

2. 使用absolute path for view

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