Множественные угловые-ui-router-tabs

Question

У меня проблемы с несколькими представлениями, каждая из которых содержит вкладки начальной загрузки.

В моей работе у меня есть два ui-представления, в которых оба содержат вкладки BS.

Мой первый вопрос: допустим, мы загрузим главную страницу, как отобразить вкладку по умолчанию для обеих вкладок BS на каждом ui-view?

Для одного по умолчанию легко вызвать конкретное состояние, но это другое.

Я использовал deepStateRedirect для одной вкладки по умолчанию, чтобы перейти к состоянию, но мне нужно, чтобы обе вкладки BS отображали свои вкладки по умолчанию.

Мой следующий вопрос, так как есть два ui-views, как я могу не повлиять на отображение другого ui-view, если я изменил другое?

коды:

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

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

Answer 1

Я нашел эту ссылку и описано очень хорошо о том, как загрузить nes просмотры Теда несколько видов в пределах страницы:

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

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

В home.tpl.html декларировать chiled взглядов вы хотели дисплей

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


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