내가 사용하고 싶은 [앙굴라이스 ᅴ 부트스트랩에 탭들] (http://angular-ui.github.io/bootstrap/ # / 탭들) 프로젝트, 하지만 내 데릭쉐퍼드와 경로설정을 지원할 수 있습니다.
예를 들면 다음과 같습니다.
Tab URL
--------------------
Jobs /jobs
Invoices /invoices
Payments /payments
지금처럼 내가 말할 수 있어 현재 '에서' 와 '창' 소스 코드, 탭들 doesn& 디렉티브에는 # 39, t 지원 라우팅할 수 있습니다.
어떤 약간만이라도 경로설정을 추가 가장 좋은 방법은?
일반적으로 사용하는 디렉티브을 ng 보기 경로설정을 추가할 수 있습니다. # 39 m, s # 39 쉽게 수정할 수 있을 만큼 충분한 it& i& 확신하지 못하고, 각 ᅴ 찾고 있지만, 어떤 you& # 39 지원할 수 있도록 하고 있다 [here& 프룬커 # 39, s] [1] you& 대략적으로 생쥐라. # 39 찾고, re (it& # 39 의 아니라도 최선의 방법을 그렇게 해 줄 수 있기를 바랍니다 - 누군가 더 나아 솔루션 및 개선 여기있을)
[1]: http://plnkr.co/edit/fuVb0mzhmDCKr1xKp7Rn? p = 미리봅니다
사용자 정의 키 값 쌍으로 라우트를 정의 및 이를 전달할 수 있습니다.
라우트를 호출됨 설정값과 운영까지도 할 경우 그 설정 페이지가 탭들 이 같은 일이 작동합니다.
<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;
}
나는 attaboy 탭들 경로설정을 하고 있는 다음과 같은 방법으로.
',' ᅴ 보기 동적으로 로드할 수 있도록 템플릿을 탭들 수신기마다
URL 에서 경로설정을 업데이트하십시오
Set history 스테이드 직접 찾아 상기하 탭 탭 'active' 으로 표시되어 있는 라우트를 보기인 수정하십시오.
탭들 정의하십시오 라우터를 통해 매개변수입니다
.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'
}
})
이 탭들 템플리트를 (타바s.사믈) 는
<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;
})