루팅을 지원하는 AngularJS UI 부트스트랩 탭

루팅을 지원하는 AngularJS UI 부트스트랩 탭

Angular를 사용하고 싶습니다.프로젝트의 JS UI 부트스트랩 탭입니다만, 루팅을 서포트하려면 필요합니다.

예를 들어 다음과 같습니다.

Tab         URL
--------------------
Jobs       /jobs
Invoices   /invoices
Payments   /payments

소스코드에서 알 수 있는 바로는 현재가tabs그리고.pane디렉티브는 루팅을 지원하지 않습니다.

루팅을 추가하는 가장 좋은 방법은 무엇입니까?

루팅을 추가하려면 보통 ng-view 디렉티브를 사용합니다.원하는 것을 지원하기 위해 각도 UI를 변경하는 것이 쉬운지는 모르겠지만, 여기 대략적인 내용을 보여주는 플런커가 있습니다(꼭 최적의 방법은 아닙니다.누군가 더 나은 솔루션을 제공하거나 개선해 주셨으면 합니다).

data-target="#tab1"을 사용합니다.나에게 효과가 있었다

이 답변은 http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx (매우 심플하지만 강력한 솔루션)에 큰 도움이 되었습니다.

저도 이 요건이 있어서 크리스가 준 답변과 비슷한 일을 하고 있지만 Angular도 사용하고 있습니다.UI 라우터, ngRouter는 중첩된 보기를 지원하지 않으며, 다른 보기 안에 탭 내용 보기가 있을 수 있기 때문에 ng-view에서는 작동하지 않습니다.

루트 정의에서 독자적인 커스텀키 값의 페어를 전달하여 이를 실현할 수 있습니다.여기 좋은 예가 있습니다.http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

상태를 추적하고 중첩된 보기에서 잘 작동하는 UI-Router 사용에 동의합니다.특히 부트스트랩탭의 문제에 대해서 말하자면 UI 라우터를 활용하는 훌륭한 구현이 있습니다.UI 라우터 탭

설정이라고 하는 루트가 있고, 그 설정 페이지에 탭이 있는 경우는, 다음과 같이 동작합니다.

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

다음과 같은 방법으로 루팅을 수행할 수 있는 탭이 있습니다.

동적 탭에서 원하는 모든 작업을 수행할 수 있으며, 실제로 매우 간단합니다.

• 의 탭ui-view템플릿을 동적으로 로드할 수 있도록 합니다.
• URL 라우팅 업데이트
• 이력 상태 설정
• 탭 뷰가 있는 루트로 직접 이동하면 올바른 탭이 다음과 같이 표시됩니다.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'
    }
})

탭 템플릿(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;
})

수락된 답변에 대한 약간의 추가: 현재 탭을 페이지 새로 고침 상태로 유지해야 했기 때문에 다음과 같은 스위치를 사용했습니다.

$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;
        }

원하는 작업을 수행할 수 있습니다.

https://github.com/angular-ui/ui-router

언급URL : https://stackoverflow.com/questions/16872191/angularjs-ui-bootstrap-tabs-that-support-routing