Question

我的角度应用程序路由如下：

$stateProvider

  // setup an abstract state for the tabs directive
  .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dotnet', {
      url: '/dotnet',
      views: {
          'tab-dotnet': {
              templateUrl: 'templates/tab-dotnet.html',
              controller: 'QuestionsCtrl'
          }
      }
  })

  .state('tab.sql', {
      url: '/sql',
      views: {
          'tab-sql': {
              templateUrl: 'templates/tab-sql.html',
              controller: 'QuestionsCtrl'
          }
      }
  })

以上两条路线使用相同的控制器但不同的html页面。由于两个页面都相同，我希望在我的应用程序中有一个单独的html页面，而不是两个不同的tab-sql和tab-dotnet页面。但是在选择选项卡时，我需要将一个微分变量注入控制器。基本上我需要这样的东西：

  .state('tab.dotnet', {
      url: '/dotnet',
      views: {
          'tab-dotnet': {
              templateUrl: 'templates/tab.html',
              controller: 'QuestionsCtrl',
              type: 'dotnet' // so that i get this type in my Controller
          }
      }
  })

  .state('tab.sql', {
      url: '/sql',
      views: {
          'tab-sql': {
              templateUrl: 'templates/tab.html',
              controller: 'QuestionsCtrl',
              type: 'sql'
          }
      }
  })

如何实现这一目标？

Answer 1

您可以使用resolve将数据传递到状态中的控制器。

  .state('tab.dotnet', {
      url: '/dotnet',
      views: {
          'tab-dotnet': {
              templateUrl: 'templates/tab.html',
              controller: 'QuestionsCtrl',
              resolve: {
                  type: 'dotnet';
              }
          }
      }
  })

  .state('tab.sql', {
      url: '/sql',
      views: {
          'tab-sql': {
              templateUrl: 'templates/tab.html',
              controller: 'QuestionsCtrl',
              resolve: {
                  type: 'sql';
              }
          }
      }
  })

https://github.com/angular-ui/ui-router/wiki#resolve

Angular UI Router中不同选项卡的相同html页面

1 个答案: