कोणीय जेएस यूआई बूटस्ट्रैप टैब (ui.bootstrap.tabs) पृष्ठ को स्क्रॉल/चुनने के लिए

Question

टैब चुनने का कारण पृष्ठ को यादृच्छिक रूप से स्क्रॉल करने का कारण बनता है उदाहरण के लिए एक टैब का चयन पृष्ठ को लगभग सभी तरह से स्क्रॉल कर सकता है, तो मैं चाहता हूं टैब की सामग्री देखने के लिए नीचे स्क्रॉल करना होगा, यदि मैं एक और टैब चुनता हूं तो पृष्ठ फिर से स्क्रॉल करता है।

टैब की सामग्री परिवर्तनीय आकार का है, कुछ लोगों की तुलना में अधिक तत्व हैं इसलिए वे स्वाभाविक रूप से विभिन्न ऊंचाइयों के हैं लेकिन मुझे यकीन नहीं है कि यह यादृच्छिक पृष्ठ स्क्रॉलिंग का कारण है या नहीं।

मैंने किसी भी भाग्य के साथ लिंक डिफ़ॉल्ट क्रियाओं को अक्षम करने के लिए कुछ jquery की कोशिश की।

$(function() { 
    $('body').on('click', 'a[ng-click="select()"]', function (event) { 
     event.preventDefault(); 
    }); 
}); 

अन्य समाधान जो बदसूरत है कि मैं एक div में tabset लिपटे और div

<div class="col-md-12" id="profile-nav-tabs" style=" 
     height:500px; 
     overflow-y: auto; 
     overflow-x:hidden 
     "> 
     <tabset justified="true"> 
      <tab heading="{{::strings.profile}}"> 
       <br /> 
       <div ng-include="'tab-profile.php'"></div> 
      </tab> 
      .... more tabs 
     </tabset> 
</div> 

Answer 1

मैं एक ही समस्या का सामना करना पड़ा पर एक ऊंचाई सेट है। कोड का पता लगाने के बाद, मुझे लगता है कि यह tabset निर्देश का एक बग है।

समाधान (चरण-दर-चरण) है:

1. संशोधित tabset.html, [ng-class="{active: tab.active}"]
2. संशोधित [tab] निर्देश के scope.$watch('active') के संचालक को हटा दें।

3. का addClass और removeClassactive कक्षा जोड़ने/निकालने के लिए फ़ंक्शन का उपयोग करें।

   link: function(scope, elm, attrs, tabsetCtrl, transclude) { 
   scope.$watch('active', function(active) { 
       /*if (active) { 
        tabsetCtrl.select(scope); 
       }*/ 
       var idx = tabsetCtrl.tabs.indexOf(scope); 
       var elmPane = angular.element(elm[0]).parent().next().children()[idx]; //li->ul->div(tab-content)->div(tab-pane) 
       if (active) { 
        tabsetCtrl.select(scope); 
        angular.element(elmPane).addClass('active'); 
       } 
       else { 
        angular.element(elmPane).removeClass('active'); 
       } 
   });