多个角度 UI-路由器选项卡

Multiple Angular-ui-router-tabs

本文关键字：路由器 选项 UI-      更新时间：2023-09-26

我在多个视图都包含引导选项卡时遇到问题。

在我的工作中，我有两个 ui 视图，都包含 BS 选项卡。

我的第一个问题是，假设我们将加载主页，如何在每个 ui 视图上显示两个 BS 选项卡的默认选项卡？

对于单个默认值，通过调用特定状态很容易，但这个状态是不同的。

我使用深度状态重定向作为单个默认选项卡进入状态，但我确实需要两个 BS 选项卡都显示其默认选项卡。

我的下一个问题是，既然有两个 ui 视图，如果我更改另一个，我怎么能不影响其他 ui 视图的显示？

代码：

首页.html

..some codes here..
<div class="col-sm-9 npm tab-div">
    <div class="tab-container npm">
        <tabs data="tabDataContent" type="tabs"></tabs>
        <div class="tab-content npm">
            <div ui-view="contentView" class="viewDiv"></div>
        </div>
    </div>
</div>          
<div class="col-sm-3 npm report-div">
    <div class="tab-container npm">
        <tabs data="tabDataReport" type="tabs"></tabs>
        <div class="tab-content npm">
            <div ui-view="reportView" class="viewDiv"></div>
        </div>
    </div>
</div>
..some codes here..

家用控制器

..some codes here..
$scope.tabDataContent = [
  {
    heading: 'REPORT MAP',
    route:   'home.ReportMapTab'
  },
  {
    heading: 'UNITS',
    route:   'home.UnitsTab'
  }
];
$scope.tabDataReport = [
  {
    heading: 'INCOMING',
    route:   'home.ReportIncomingTab'
  },
  {
    heading: 'ONGOING',
    route:   'home.ReportOngoingTab'
  }
];
..some codes here..

路由器.js

..some codes here..
.state('home',{
  url:'/home',
  templateUrl: 'views/home.html',
  controller: 'HomeController',
  deepStateRedirect: { default: { state: 'home.init' } }
})

.state('home.init',{
  url:'',
  views: {
    "contentView": { 
      templateUrl: 'views/homeTabs/reportMap.html',
      controller: 'HomeReportMapController' 
    },
    "reportView": { templateUrl: 'views/homeTabs/reportIncoming.html' }
  } 
})

.state('home.ReportMapTab',{
  url:'/reportMap',
  views: {
    "contentView": { 
      templateUrl: 'views/homeTabs/reportMap.html',
      controller: 'HomeReportMapController'
    }
  }
})

.state('home.UnitsTab',{
  url:'/units',
  views: {
    "contentView": { 
      templateUrl: 'views/homeTabs/units.html',
      controller: 'HomeUnitsController'
    }
  }
})

.state('home.ReportIncomingTab',{
  url:'',
  views: {
    "reportView": { 
      templateUrl: 'views/homeTabs/reportIncoming.html',
    }
  }
})

.state('home.ReportOngoingTab',{
  url:'',
  views: {
    "reportView": { 
      templateUrl: 'views/homeTabs/reportOngoing.html',
    }
  }
})
..some codes here..

我找到了这个链接，并很好地描述了如何在页面中加载嵌套视图和多个视图：

https://scotch.io/tutorials/angular-routing-using-ui-router

.state('home', {
    url: '/home',
    views: {
        // the main template will be placed here (relatively named)
        '': { templateUrl: 'home.tpl.html' },
        // the child views will be defined here (absolutely named)
        'columnOne@home': { 
           template: 'child1.tpl.html',
           controller: ''
         },
        // for column two, we'll define a separate controller 
        'columnTwo@home': { 
            templateUrl: 'child2.tpl.html',
            controller: ''
        }
    }
});

索引.html

<div ui-view></div><!-- parent view renders home.tpl.html-->

在 home.tpl 中.html声明要显示的分区视图

<!-- chiled views -->
<div class="col-sm-6">
    <div ui-view="columnOne"></div>
</div>

<div class="col-sm-6">
    <div ui-view="columnTwo"></div>
</div>
相关文章：