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，因为在这种情况下解析主页状态之前导航和页脚显示。

Answer 1

是的，你可以，它实际上写在关于如何管理Multiple Named Views的ui-router指南中。

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

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

在无名视图中，包含content.html，其中包含无名ui-view，代表app州的所有子状态。通过这样做，如果您在nav.html状态下添加这些状态，则可以将footer.html和app分享到您的所有州。一个例子是app.home和app.items状态。要了解有关详情，请阅读我上面添加的链接。

<强> DEMO

<强> 的Javascript

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

Answer 2

根据您的其他路线，您可以使用abstract state执行此操作：

Angular UI Router - Views in an Inherited State也可能有助于您指明正确的方向。

Angular ui路由器为所有状态提供多个命名视图

2 个答案: