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

2022-01-21 00:00:00 angularjs javascript angular-ui-router

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

I want to know if there is any way to write multiple named view for all states, the best example is when i want the nav bar and footer to appear in all routes.

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

我不想使用 ng-include，因为在这种情况下，导航和页脚在主状态解决之前显示.

I dont want to use ng-include, because the nav and the footer is showing before the home state is resolved in this case.

推荐答案

可以，其实写在ui-router的管理指南多个命名视图.

Yes you can, its actually written in the ui-router's guide on how to manage Multiple Named Views.

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

First, you need to define a specific set of named views in an abstract state, including the view where you would put all your content views such as your home.html and put it in a nameless view (empty string).

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

As you may have noticed, the demo below shows a root state named app, which is also an abstract state (this means you can't navigate in this state). It has three views, each represents a name that corresponds to the ui-views defined in the index.html.

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

Within the nameless view, contains the content.html that has a nameless ui-view that will represent all the child states of the app state. By doing this, you can share the nav.html and footer.html to all your states if you add these states under the app state. An example to this would be the app.home and app.items state. To learn more about this, read the link I've added above.

演示

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>

相关文章