Angular ui路由器针对所有状态的多个命名视图

Question

我想知道是否有任何方法可以为所有状态编写多个命名视图，最好的例子是当我希望导航栏和页脚出现在所有路线中时。

$stateProvider
  .state('home',{
    views: {
      'home': {
        templateUrl: 'home.html',
        controller: controller
      },
      'nav': {
        templateUrl: 'nav.html',
        controller:controller
      },
      'footer': {
        templateUrl: 'footer.html',
        controller: controller
      },
    }
  })

我不想使用ng-include，因为在这种情况下，导航和页脚在显示home状态之前就已显示。

Answer 1

是的，您可以的，它实际上写在ui-router有关如何管理 多个命名视图 的指南中。

首先，您需要在抽象状态下定义一组特定的命名视图，包括将所有内容视图（例如）home.html放入无名视图（空字符串）的视图。

您可能已经注意到，下面的演示显示了一个名为的根状态app，它也是一个抽象状态（这意味着您无法在此状态下导航）。它具有三个视图，每个视图代表一个名称，该名称与中ui- view定义的相对应index.html。

在无名视图中，包含包含content.html具有无名ui- view将代表该状态的所有子状态的app。这样，如果您在状态下添加这些状态，则可以将nav.html和共享footer.html给所有app状态。一个例子就是app.homeand
app.items状态。要了解更多信息，请阅读我在上面添加的链接。

演示

Java脚本

$urlRouterProvider.otherwise('/home');

$stateProvider.state('app', {
  abstract: true,
  views: {
   nav: {
     templateUrl: 'nav.html',
     controller: 'NavController as Nav'
   },

   '': {
     templateUrl: 'content.html',
     controller: 'ContentController as Content'
   },

   footer: {
     templateUrl: 'footer.html',
     controller: 'FooterController as Footer'
   }

  }
})

.state('app.items', {
  url: '/items',
  templateUrl: 'items.html',
  controller: 'ItemsController as Items'
})

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

HTML

index.html

<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>

content.html

<hr>
<ui-view></ui-view>
<hr>