多个Angular-ui-router-tabs [英] Multiple Angular-ui-router-tabs

问题描述

我在多个视图中都遇到问题，每个视图都包含引导程序选项卡.

I'm having issues with multiple views that each contains the bootstrap tabs.

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

On my work I have two ui-views that both contain BS tabs.

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

My first question is, let's say we'll load the home page, how to display the default tab for both BS tabs on each ui-views?

通过调用特定状态可以很容易地实现一个默认值，但这是不同的.

For a single default is easy by calling the specific state but this one is different.

我对单个默认选项卡使用了deepStateRedirect进入状态，但是我确实需要两个BS选项卡都显示其默认选项卡.

I used the deepStateRedirect for a single default tab to go to the state but I do need both the BS tabs display their default tabs.

我的下一个问题是，由于有两个ui视图，如果我更改了另一个ui视图，怎么能不影响另一个ui视图的显示?

My next question is, since there are two ui-views, how can I not affect the display of other ui-view if I changed the other?

代码:

home.html

home.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..

routers.js

routers.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..

推荐答案

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

I have found this link and described very nicely about how to load nested views and multiple views within page:

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: ''
        }
    }

});

Index.html

Index.html

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

在home.tpl.html中声明要显示的已编译视图

In home.tpl.html declare the chiled views you wanted display

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


<div class="col-sm-6">
    <div ui-view="columnTwo"></div>
</div>

这篇关于多个Angular-ui-router-tabs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！