कोणीय बूटस्ट्रैप-चयन समय मुद्दा ताज़ा करने के लिए

Question

मैं Bootstrap-Select प्यार है और मैं अभी किसी अन्य उपयोगकर्ता joaoneto/angular-bootstrap-select द्वारा किए गए एक निर्देश की मदद के माध्यम से उपयोग कर रहा हूँ और यह के रूप में जब मैं एक $http या में साथ मेरे <select> तत्व को भरने के लिए कोशिश को छोड़कर अपेक्षित तरीके से काम मेरा मामला dataService रैपर। मुझे कुछ समय मुद्दा मिल रहा है, डेटा selectpicker के बाद प्रदर्शित/ताज़ा हो गया है और फिर मैं एक खाली बूटस्ट्रैप-चयन सूची प्राप्त कर रहा हूं .. हालांकि फायरबग के साथ, अब मैं छिपे हुए <select> में मूल्यों की सूची देखता हूं। यदि मैं फिर कंसोल में जाता हूं और $('.selectpicker').selectpicker('refresh') मैन्युअल रूप से निष्पादित करता हूं तो यह काम करता है।
मुझे यह एक पैच करके अस्थायी रूप से काम कर रहा है और को $timeout के अंदर जोड़ रहा है लेकिन जैसा कि आप जानते हैं कि यह आदर्श नहीं है क्योंकि हम jQuery का उपयोग सीधे एनजी कंट्रोलर में कर रहे हैं ... आउच!

तो मेरा मानना ​​है कि निर्देश संभवतः एक वॉचर या कम से कम कुछ ट्रिगर करने के लिए कुछ है जो ngModel बदल गया है या अपडेट हो गया है।

एचटीएमएल नमूना कोड:

<div class="col-sm-5"> 
    <select name="language" class="form-control show-tick" 
     ng-model="vm.profile.language" 
     selectpicker data-live-search="true" 
     ng-options="language.value as language.name for language in vm.languages"> 
    </select> 
    <!-- also tried with an ng-repeat, which has the same effect --> 
</div> 

फिर मेरे कोणीय नियंत्रक के अंदर:

// get list of languages from DB 
dataService 
    .getLanguages() 
    .then(function(data) { 
     vm.languages = data; 

     // need a timeout patch to properly refresh the Bootstrap-Select selectpicker 
     // not so good to use this inside an ngController but it's the only working way I have found 
     $timeout(function() { 
      $('.selectpicker, select[selectpicker]').selectpicker('refresh'); 
     }, 1); 
    }); 

और यहाँ पर कोणीय साथ GitHub for Angular-Bootstrap-Select

function selectpickerDirective($parse, $timeout) { 
    return { 
    restrict: 'A', 
    priority: 1000, 
    link: function (scope, element, attrs) { 
     function refresh(newVal) { 
     scope.$applyAsync(function() { 
      if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) element.val(newVal); 
      element.selectpicker('refresh'); 
     }); 
     } 

     attrs.$observe('spTheme', function (val) { 
     $timeout(function() { 
      element.data('selectpicker').$button.removeClass(function (i, c) { 
      return (c.match(/(^|\s)?btn-\S+/g) || []).join(' '); 
      }); 
      element.selectpicker('setStyle', val); 
     }); 
     }); 

     $timeout(function() { 
     element.selectpicker($parse(attrs.selectpicker)()); 
     element.selectpicker('refresh'); 
     }); 

     if (attrs.ngModel) { 
     scope.$watch(attrs.ngModel, refresh, true); 
     } 

     if (attrs.ngDisabled) { 
     scope.$watch(attrs.ngDisabled, refresh, true); 
     } 

     scope.$on('$destroy', function() { 
     $timeout(function() { 
      element.selectpicker('destroy'); 
     }); 
     }); 
    } 
    }; 
} 

Answer 1

एक समस्या यह निर्देश (joaoneto) द्वारा बनाई गई है -बूटस्ट्रैप-निर्देश का चयन करें, यह है कि यह केवल ngModel देखता है, और वह ऑब्जेक्ट नहीं जो वास्तव में सेल में विकल्पों को पॉप्युलेट कर रहा है सीटी। उदाहरण के लिए, यदि vm.profile.language डिफ़ॉल्ट रूप से '' पर सेट किया गया है, और vm.languages में '' विकल्प है, तो चयन नए विकल्पों के साथ अपडेट नहीं होगा, क्योंकि ngModel वही रहता है। मैंने चयन करने के लिए selectModel विशेषता जोड़ा, और कोणीय-बूटस्ट्रैप-चयन कोड को थोड़ा संशोधित किया।

<div class="col-sm-5"> 
    <select name="language" class="form-control show-tick" 
     ng-model="vm.profile.language" 
     select-model="vm.languages" 
     selectpicker data-live-search="true" 
     ng-options="language.value as language.name for language in vm.languages"> 
    </select> 
</div> 

फिर, कोणीय बूटस्ट्रैप का चयन कोड में, मैं

if (attrs.selectModel) { 
    scope.$watch(attrs.selectModel, refresh, true); 
} 

जोड़ा अब, जब vm.languages अद्यतन किया जाता है, का चयन भी अद्यतन किया जाएगा। एक बेहतर तरीका शायद यह पता लगाने के लिए होगा कि ngOptions का उपयोग कर किस वस्तु को देखा जाना चाहिए, लेकिन इस विधि का उपयोग करके चयन के भीतर ngRepeat के उपयोग की अनुमति भी मिलती है।

संपादित करें:

एक वैकल्पिक selectModel उपयोग करने के लिए स्वचालित रूप से ngOptions से देखने के लिए वस्तु का पता लगाने है।

if (attrs.ngOptions &&/in /.test(attrs.ngOptions)) { 
    scope.$watch(attrs.ngOptions.split(' in ')[1], refresh, true); 
} 

संपादित करें 2:

refresh समारोह का उपयोग कर के बजाय, आप शायद बेहतर होगा बस फिर element.selectpicker('refresh'); बुला, जैसा कि आप केवल वास्तव में चयन जब ngModel परिवर्तन का मान अपडेट करना चाहते हैं। मैं एक परिदृश्य में भाग गया जहां विकल्पों की सूची अपडेट की जा रही थी, और चयन का मूल्य बदल गया, लेकिन मॉडल नहीं बदला, और नतीजतन यह selectpicker से मेल नहीं खाता। यह मेरे लिए यह हल:

if (attrs.ngOptions &&/in /.test(attrs.ngOptions)) { 
    scope.$watch(attrs.ngOptions.split(' in ')[1], function() { 
     scope.$applyAsync(function() { 
      element.selectpicker('refresh'); 
     }); 
    }, true); 
} 

Answer 2

मैं माफी चाहता हूँ, लेकिन जहां कोणीय बूटस्ट्रैप का चयन कोड में आपको लगता है कि कोड जोड़ा है? मैं पूछ रहा हूं क्योंकि यह कहता है कि atters परिभाषित नहीं है।