angularjs Ui.router के साथ कोनेरी ui.bootstrap टैब का उपयोग कैसे करें?




tabs angular-ui-router (3)

यहां ui.router का उपयोग करते हुए IU.bootstrap टैब का प्रारंभिक कार्यान्वयन है:

<tabset>
  <tab heading="Tab1" select="$state.go('home.tab1')">
    <div ui-view="forTab1"></div>
  </tab>
  <tab heading="Tab2" select="$state.go('home.tab2')">
    <div ui-view="forTab2"></div>
  </tab>
</tabset>

सरल रूप से सरल है, और यह ज्यादातर काम करता है, लेकिन इसमें कई समस्याएं हैं।

सबसे पहले, अगर मैं ब्राउज़र में यूआरएल दर्ज करता हूं तो यह काम नहीं करता है, जैसे "... / home / tab1" मुझे लगता है कि मुद्दा यह है कि जब ui.router सही दृश्य पर रूटिंग कर सकता है, तो उस दृश्य टैब का चयन नहीं करना पड़ता है।

दूसरा, अगर मैं पृष्ठ को एक अलग पृष्ठ पर छोड़ने की कोशिश करता हूं, तो यह टैब लॉजिक में स्पष्ट बग को ट्रिगर करता है। जैसे कि टैब सेट नष्ट हो रहा है, यह टैब को एक-एक करके नष्ट कर देता है। जब यह वर्तमान में चयनित टैब को नष्ट कर देता है, तो ऐसा लगता है कि ऐसा ही चलाना होगा कि यह तब चला जाएगा यदि केवल टैब नष्ट हो रहा हो, संपूर्ण टैब सेट न हो यह अन्य गैर-नष्ट न किए गए टैबों में से किसी एक का चयन करने के लिए कारण है, जो कि यूरी। क्वोटर्स को उस टैब पर जाता है, जो मुझे पृष्ठ छोड़ने से रोकता है। (निश्चय यह होना चाहिए कि टैब सेट को नष्ट करने से विनाश प्रक्रिया के दौरान किसी भी टैब का चयन नहीं किया जाना चाहिए।)

तीसरा, कुछ टैब विचार जटिल हो सकते हैं, उसके निर्माण के दौरान कई सर्वर हिट होते हैं। मैं हर बार जब मैं एक टैब से दूसरे टैब पर स्विच करता हूं तो उन्हें नष्ट नहीं करना चाहता हूं। जब मैं उस टैब को पहली बार चुना जाता हूं, तब मेरे पास एक टैब दृश्य बनना ज़्यादा होगा और तब तक जारी रहूँगा जब तक मैं पेज छोड़ूँ पहले देखे गए टैब का चयन करना इसे फिर से दृश्यमान बनाना चाहिए, इसे फिर से नहीं बनाना चाहिए

तो, ऐसा लगता है कि मुझे कुछ और जटिल और परिष्कृत की आवश्यकता है, लेकिन क्या? किसी सुझाव के लिए अग्रिम धन्यवाद।

अपडेट: ui.router अकसर किये गए सवाल टैब पर लागू करने के बारे में एक प्रश्न पूछने के लिए निकलते हैं। यह एक "एक्स्ट्रा" पैकेज को इंगित करता है जो आशाजनक दिखता है। उम्मीद है कि ui.bootstrap टैब के साथ एकीकृत करने का एक तरीका है। http://christopherthielen.github.io/ui-router-extras/#/sticky

अद्यतन: ये दो कार्यान्वयन हैं जो बेहतर काम करते हैं, लेकिन अभी भी काफी सही नहीं हैं। पहले एक यूआई बूटस्ट्रैप टैब का उपयोग करता है:

<tabset>
  <tab heading="Products" ui-sref=".products" active="$state.includes('home.products')"></tab>
  <tab heading="Users" ui-sref=".users" active="$state.includes('home.users')"></tab>
</tabset>
<div ui-view="home.products" ng-show="$state.includes('home.products')"></div>
<div ui-view="home.users" ng-show="$state.includes('home.users')"></div>

दूसरा सीक्रेट थिलेन के स्टिकी-टैब्स उदाहरण से है:

<div class="navbar navbar-default navbar-static-top" role="navigation">
  <ul class="nav navbar-nav">
    <li ng-class="{active: $state.includes('home.products')}" ><a ui-sref="home.products">Products</a></li>
    <li ng-class="{active: $state.includes('home.users')}" ><a ui-sref="home.users">Users</a></li>
  </ul>
</div>
<div class="tabcontent well-lg" ui-view="home.products" ng-show="$state.includes('home.products')" class="col-sm-6"></div>
<div class="tabcontent well-lg" ui-view="home.users"    ng-show="$state.includes('home.users')"    class="col-sm-6"></div>

ये दोनों मेरी सबसे ऊपर की पहली दो समस्याओं से बचते हैं - यूआरएल कार्यों के माध्यम से एक टैब पर जा रहे हैं, और मैं टैब को बग को ट्रिगर करने के बिना पृष्ठ छोड़ सकता हूं (संभाव्यतः क्योंकि मैं "select =" का प्रयोग नहीं कर रहा हूँ)।

हालांकि, अभी भी एक समस्या है, और यह दोनों संस्करणों के साथ होता है Home.users टेम्पलेट में एक UI- ग्रिड है, और अगर मैं पहले उस टैब के साथ पेज पर जाता हूं, तो ग्रिड खाली है। मैं सर्वर से ग्रिड के डेटा का अनुरोध करने वाला ग्राहक देख सकता हूं, लेकिन यह इसे प्रदर्शित नहीं करता। अगर मैं दूसरे टैब पर जाता हूं और वापस आ जाता हूं, तो यह डेटा दिखाता है (इसे फिर से लाया जाने के बाद)। इससे भी बदतर, इसका मतलब है कि मैं घर नहीं बना सकता। जोर्स चिपचिपा राज्य है, क्योंकि तब यह आंकड़ा-दिखाए मोड में फंस जाता है।


सबसे आसान तरीका है सभी फैंसी UI-बूटस्ट्रैप निर्देशों को अनदेखा करना और बस सीएसएस का उपयोग करना। तो आप कुछ बहुत आसान के साथ समाप्त कर सकते हैं:

<ul class="nav nav-tabs">
    <li ui-sref=".state1" ui-sref-active="active"><a>State 1</a></li>
    <li ng-repeat="type in viewModel.types"
        ui-sref=".typeState({type:type})"
        ui-sref-active="active"><a>{{type}}</a></li>
</ul>

यह सही सक्रिय राज्यों को बनाए रखने के दौरान टैब के रूप में प्रकट होगा। <tab-header> निर्देश का उपयोग करने में समस्या यह है कि आप यूआई-राउटर $state से सक्रिय स्थिति को सुरक्षित रूप से प्रारंभ नहीं कर सकते, इसलिए आपको पृष्ठ लोड पर कई टैब हाइलाइट किए गए हैं।


बस मेरा एक प्रोजेक्ट में ऐसा किया यह मानता है कि आपके रूट्स ui.router के साथ वायर्ड हैं। आशा करता हूँ की ये काम करेगा।

<uib-tabset active="active">

    <uib-tab index="0" ui-sref ="tab1" heading="Tab1"></uib-tab>

    <uib-tab index="1" ui-sref="tab2" heading="Tab2"></uib-tab>

</uib-tabset>


आप इस प्रोजेक्ट, यूआई राउटर प्लस यूई बूटस्ट्रैप टैब पर एक नज़र रखने पर विचार कर सकते हैं , जो स्वयं के रूप में घोषित करता है

इडियट-प्रूफ टैब, कांच का समर्थन करते हुए Angular.js + Bootstrap 3 + UI राउटर का उपयोग कर

मैंने इसे अभी तक नहीं किया है, लेकिन निश्चित रूप से आशाजनक दिखता है







angular-ui-bootstrap