Я хотел бы воспользоваться в AngularJS интерфейс начальной загрузки вкладок в мой проект, но мне нужна поддержка маршрутизации.
Например:
Tab URL
--------------------
Jobs /jobs
Invoices /invoices
Payments /payments
Насколько я могу понять из исходного кода, директивы панель текущей вкладки и
`не'маршрутизации поддержка t.
Что бы быть лучшим способом, чтобы добавить маршрутизации?
Для добавления маршрутизации вы обычно используете НГ-вид директивы. Я'м не уверен, что это's легко достаточно для изменения угловой UI, чтобы поддержать то, что вы'вэ искал, но здесь'ы в plunker]1 показывает примерно то, что я думаю, что вы'вновь ищет (он's не обязательно лучший способ сделать это - надеюсь, кто-то может дать вам лучшее решение или изменить свое отношение к этой)
Этот ответ действительно помог мне http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx (очень простой, но мощное решение)
У меня тоже есть это требование, и я'м делаю что-то похожее на ответ Крис, но я'м также используя AngularUI маршрутизатор, потому что ngRouter не поддерживает вложенных представлений и возможно вы'будете иметь содержание вкладки вид в другой вид (я) и что выиграл'т работать с НГ-представление.
Согласен с использованием пользовательского интерфейса маршрутизатора, который отслеживает государства и работает с вложенных представлений. Говоря конкретно вашей начальной загрузки вкладки вопрос есть большой реализации, который использует маршрутизатор интерфейса: пользовательский интерфейс-маршрутизатор вкладки
вы можете передать свой собственный пар ключ-значение в определении маршрута и добиться этого. здесь'хороший пример: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
Если у вас есть маршрут под названием "Settings" и вы хотите, чтобы вкладки в разделе настроек что-то, как это работает.
<div class="right-side" align="center">
<div class="settings-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#!/settings#private_email">Private email</a></li>
<li><a data-toggle="tab" href="#!/settings#signature">Signature</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="private_email" class="tab-pane fade in active">
<div class="row" ng-controller="SettingsController">
<div>
<button class="btn btn-primary" ng-click="activatePrivateEmail()">Activate email</button>
<button class="btn btn-danger">Deactivate email</button>
</div>
</div>
</div>
<div id="signature" class="tab-pane fade">
<textarea ui-tinymce="tinymceOptions" ng-model="signature"></textarea>
<div class="send-btn">
<button name="send" ng-click="" class="btn btn-primary">Save signature</button>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
</div>
просто небольшое добавление к принятой ответ: мне нужно сохранить текущую вкладку в обновить страницу, так что я использовал переключатель такой:
$scope.tabs = [
{ link : '#/furnizori', label : 'Furnizori' },
{ link : '#/total', label : 'Total' },
{ link : '#/clienti', label : 'Clienti' },
{ link : '#/centralizator', label : 'Centralizator' },
{ link : '#/optiuni', label : 'Optiuni' }
];
switch ($location.path()) {
case '/furnizori':
$scope.selectedTab = $scope.tabs[0];
break;
case '/total':
$scope.selectedTab = $scope.tabs[1];
break;
case '/clienti':
$scope.selectedTab = $scope.tabs[2];
break;
case '/centralizator':
$scope.selectedTab = $scope.tabs[3];
break;
case '/optiuni':
$scope.selectedTab = $scope.tabs[4];
break;
default:
$scope.selectedTab = $scope.tabs[0];
break;
}
У меня есть вкладки с маршрутизацией работает следующим образом.
Это'ы уметь делать все, что вы хотите от динамических вкладок, и It'ов на самом деле очень просто.
интерфейс
зрения, поэтому он может динамически загружать шаблоныОпределить вкладок с параметров вашего маршрутизатора
.state('app.tabs', {
url : '/tabs',
template : template/tabs.html,
})
.state('app.tabs.tab1', {
url : '/tab1',
templateUrl : 'template/tab1.html',
params : {
tab : 'tab1'
}
})
.state('app.visitors.browser.analytics', {
url : '/tab1',
templateUrl : 'template/tab2.html',
params : {
tab : 'tab2'
}
})
Шаблон вкладки (tabs.html) является
<div ng-controller="TabCtrl as $tabs">
<uib-tabset active="$tabs.activeTab">
<uib-tab heading="This is tab 1" index="'tab1'" ui-sref="app.tabs.tab1"></uib-tab>
<uib-tab heading="This is tab 2" index="'tab2'" ui-sref="app.tabs.tab2"></uib-tab>
</uib-tabset>
<div ui-view></div>
</div>
Который работает в паре с очень простой контроллер для получения текущей активной вкладки:
app.controller('TabCtrl', function($stateParams) {
this.activeTab = $stateParams.tab;
})
Это имущество должно быть в состоянии сделать то, что вы хотите: