angularjs क्या गतिशील रूप से कोणीय बूटस्ट्रैप यूआईबी ड्रॉपडाउन टेम्पलेट यूआरएल को बदलना संभव है?




twitter-bootstrap drop-down-menu (2)

डेमो (पिछले एक प्रयास करें):

http://plnkr.co/edit/1yLmarsQFDzcLd0e8Afu?p=preview

इसे कैसे काम करना है?

आपके प्लंबर के आधार पर, आपको बदलना चाहिए

<div class="input-group" uib-dropdown auto-close="disabled">
    <input type="text" class="form-control" placeholder="Click to start a visual query search..." autocomplete="off" uib-dropdown-toggle/>
    <ul class="dropdown-menu" role="menu" ng-if="ctrl.dropdownReady" uib-dropdown-menu template-url="{{ctrl.dropdownTemplateFour}}">
    </ul>
    <span class="input-group-btn">
    <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
    </button>
    </span>
</div>

सेवा मेरे

<div class="input-group" uib-dropdown auto-close="disabled"  ng-if="ctrl.dropdownReady">
    <input type="text" class="form-control" placeholder="Click to start a visual query search..." autocomplete="off" uib-dropdown-toggle/>
    <ul class="dropdown-menu" role="menu" uib-dropdown-menu template-url="{{ctrl.dropdownTemplateFour}}">
    </ul>
    <span class="input-group-btn">
    <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
    </button>
    </span>
</div>

जिसमें ng-if="ctrl.dropdownReady" को div.input-group स्थानांतरित किया जाता है

और बदलाव

vm.dropdownReady = false;
console.log('vm.dropdownReady =', vm.dropdownReady, ' partial = ', partial);
switch (template) {
  case 'word':
    partial ? vm.dropdownTemplateFour = 'word-dropdown-dom.template.html' : vm.dropdownTemplateThree = 'word-dropdown-dom.html';
    break;
  case 'main':
    partial ? vm.dropdownTemplateFour = 'main-dropdown-dom.template.html' : vm.dropdownTemplateThree = 'main-dropdown-dom.html';
    break;
}
vm.dropdownReady = true;

सेवा मेरे

vm.dropdownReady = false;
console.log('vm.dropdownReady =', vm.dropdownReady, ' partial = ', partial);
switch (template) {
  case 'word':
    partial ? vm.dropdownTemplateFour = 'word-dropdown-dom.template.html' : vm.dropdownTemplateThree = 'word-dropdown-dom.html';
    break;
  case 'main':
    partial ? vm.dropdownTemplateFour = 'main-dropdown-dom.template.html' : vm.dropdownTemplateThree = 'main-dropdown-dom.html';
    break;
}
$timeout(function(){
  vm.dropdownReady = true;
});

जो $timeout में vm.dropdownReady = true; को vm.dropdownReady = true; । और आपको $timeout को हाथ से इंजेक्ट करना चाहिए;

मेनू को खुले रखें

दस्तावेज़ीकरण के अनुसार, हम is-open अट्र के साथ ड्रॉप मेनू की प्रारंभिक अवस्था चुन सकते हैं। और हम on-toggle अट्र के साथ टॉगल इवेंट को सुन सकते हैं। इसलिए अगर हम उपयोगकर्ता को इनपुट पर क्लिक करने के बाद मेनू को खुले रखना चाहते हैं, तो हमें इस तरह uib-dropdown की विशेषताओं को सेट करना चाहिए:

<div class="input-group" uib-dropdown auto-close="disabled"  ng-if="ctrl.dropdownReady" is-open="ctrl.open" on-toggle="ctrl.toggled(open)">

और नियंत्रक में:

vm.toggled = function (open) {
    // the parameter `open` is maintained by *angular-ui/bootstrap*
    vm.open=open;//we don't need to init the `open` attr, since it's undefined at beginning
}

इन चीज़ों के साथ, मेनू खोलने के बाद, यह फिर से इनपुट के बिना प्रयोक्ता को क्लिक किए बिना बंद नहीं होता है

क्यूं कर?

इस स्निपेट की जांच करें:

$templateRequest(self.dropdownMenuTemplateUrl)
    .then(function(tplContent) {
    templateScope = scope.$new();
    $compile(tplContent.trim())(templateScope, function(dropdownElement) {
        var newEl = dropdownElement;
        self.dropdownMenu.replaceWith(newEl);//important
        self.dropdownMenu = newEl;
        $document.on('keydown', uibDropdownService.keybindFilter);
    });
});

ऊपर स्निपेट दिखाता है कि कोण-यूआई / बूटस्ट्रैप टेम्पलेट को पुनःप्राप्त करने के लिए टेम्पलेट-यूआरएल एट्रर का इस्तेमाल करता है और इसे प्रभावी रूप में ले जाता है। यह एक नया बनाए गए तत्व के साथ मूल ul तत्व को बदल देता है यही कारण है कि ul पर क्लिक करने के बाद uib-dropdown-menu और template-url गायब हो गया है चूंकि वे मौजूद नहीं हैं, इसलिए आप टेम्पलेट-यूआरएल को कोयोल बंधन के साथ बदल नहीं सकते हैं।

vm.dropdownReady = true; निष्पादित करने का कारण vm.dropdownReady = true; तुरंत बाद vm.dropdownReady = false; यह काम नहीं करता है कि यह कोणीय को इस बदलाव को बाधित करने और "एनजी-अगर" को वास्तव में dom को हटाने के लिए निष्पादित करने का कोई मौका नहीं है। आपको इसे प्राप्त करने के लिए कोणीय को मौका देने के लिए vm.dropdownReady एसिंक्रोनस के टॉगल करना चाहिए।

मैं uib-dropdown टेम्पलेट को गतिशील रूप से बदलना चाहता हूं जब उपयोगकर्ता अपनी <li> क्लिक करता है, जैसे कि वह ड्रॉपडाउन में "नेविगेट" कर सकता था।

मैंने इसे templateUrl माध्यम से बनाने की कोशिश की, लेकिन नं ng-templates और न ही स्टैंडअलोन आंशिक सफलतापूर्वक ड्रॉप डाउन टेम्पलेट को गतिशील रूप से बदल सकते हैं, जैसे कि यह प्लंकर प्रदर्शित करता है

फ़ील्डबुक के स्प्रिंट ट्रैकर (खाता आवश्यक) पर देखा गया, जैसा कि इस ड्रॉपडाउन के माध्यम से नेत्रहीन क्वेरी बनाने के लिए एक मुखी नेविगेशन बनाना है, जो वास्तव में शुद्ध कोणीय उन्नत खोजबॉक्स की तरह है , लेकिन मुझे इस पुस्तकालय का उपयोग करने वाले भारी समस्याएं हैं I

क्या यह सिर्फ अंगुलेज और कोणीय-बूटस्ट्रैप का उपयोग करना संभव है?


संपादित करें : आपको template-url के मान को एक नियंत्रक var का उपयोग करना चाहिए जो उपयोगकर्ता के किसी भी विकल्प को चुनने के रूप में बदलता है, फिर आप घटक को "फिर से रंगना" करें, इस तरह से "नया" लटकती नए टेम्पलेट के साथ "repainted" है

हां, यह आधिकारिक दस्तावेजों के अनुसार संभव है, हालांकि मैंने पहले कभी ऐसा नहीं किया है।

आप template-url नामक एक यूआईबी ड्रॉपडाउन-मेनू सेटिंग निर्दिष्ट कर सकते हैं।

डॉक्स के अनुसार

डिफ़ॉल्ट मान कोई नहीं है

तथा

आप ड्रॉपडाउन मेनू के लिए एक टेम्पलेट निर्दिष्ट कर सकते हैं







angular-bootstrap