AngularJS UI बूटस्ट्रैप टैब जो रूटिंग का समर्थन करता है




angularjs-directive angular-ui-bootstrap (7)

मैं अपने प्रोजेक्ट में AngularJS UI बूटस्ट्रैप टैब का उपयोग करना चाहूंगा, लेकिन मुझे रूटिंग का समर्थन करने की आवश्यकता है।

उदाहरण के लिए:

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

जहां तक ​​मैं स्रोत कोड से बता सकता हूं, वर्तमान tabs और pane निर्देश रूटिंग का समर्थन नहीं करता है।

रूटिंग को जोड़ने का सबसे अच्छा तरीका क्या होगा?




निम्नलिखित तरीके से काम करने के साथ मुझे टैब मिला।

यह गतिशील टैब से वह सब कुछ करने में सक्षम है, और यह वास्तव में बहुत सरल है।

  • ui-view साथ टैब, ताकि यह गतिशील रूप से टेम्प्लेट लोड कर सके,
  • URL में अपडेट राउटिंग
  • इतिहास की स्थिति निर्धारित करें
  • जब सीधे टैब किए गए दृश्य वाले मार्ग पर नेविगेट करते हैं, तो सही टैब active के रूप में चिह्नित होता 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;
})

मुझे भी इसकी आवश्यकता है और मैं क्रिस द्वारा प्रदान किए गए उत्तर के समान कुछ कर रहा हूं, लेकिन मैं AngularUI राउटर का उपयोग भी कर रहा हूं, क्योंकि ngRouter नेस्टेड दृश्यों का समर्थन नहीं करता है और यह संभव है कि आपके पास किसी अन्य दृश्य के अंदर टैब सामग्री का दृश्य होगा (मैंने किया) और वह एनजी-व्यू के साथ काम नहीं करेगा।



यूआई-राउटर के उपयोग से सहमत हैं जो राज्यों को ट्रैक करता है और नेस्टेड विचारों के साथ महान काम करता है। विशेष रूप से आपके बूटस्ट्रैप टैब के मुद्दे को बोलते हुए एक महान कार्यान्वयन है जो यूआई राउटर का लाभ उठाता है: यूआई-राउटर टैब्स


स्वीकृत उत्तर के लिए बस एक छोटा सा जोड़: मुझे वर्तमान टैब को ताज़ा रखने की आवश्यकता है इसलिए मैंने इस तरह से एक स्विच का उपयोग किया:

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




bootstrap-tabs