javascript AngularStrap ड्रॉपडाउन मैन्युअल रूप से प्रदर्शित करें-कैसे?




html angularjs (3)

मैं मैन्युअल रूप से एक AngularStrap ड्रॉपडाउन प्रदर्शित करने की कोशिश कर रहा हूं, जैसे $dropdownProvider पर trigger कॉन्फ़िगरेशन का लाभ उठा रहा है

// how dropdown is triggered - click | hover | focus | manual
app.config(function($dropdownProvider) {
    angular.extend($dropdownProvider.defaults, {
        trigger: 'manual'
    });
});

hover focus सभी काम ठीक click , लेकिन manual क्यों नहीं? मुझे अब तक कोई सबूत पता नहीं है कि यह एपीआई कॉन्फ़िगरेशन विकल्प का काम करता है। मैं यह कैसे कर सकता हूँ?

वास्तव में, यह मुद्दा मेरे मूल प्रश्न के बाद posised लगता है, लेकिन अब बंद है और एक साल बाद में मुझे अभी भी एक समाधान खोजने के लिए अभी भी है

समस्या: ट्रिगर = मैन्युअल उपयोग करने के तरीके पर प्रलेखन गायब है

मैंने एक उदाहरण को छू लिया है जो बताता है कि मैं इस के साथ संघर्ष कर रहा हूं। अपने लक्ष्य को स्पष्ट करने के लिए, मैं एक कुंजीस्ट्रोक ( ng-model परिवर्तन) पर अपने <textarea> में ड्रॉपडाउन को ट्रिगर करना चाहता हूं। मैं ड्रॉपडाउन पर पकड़ लेना चाहता हूं और किसी भी डिफ़ॉल्ट ट्रिगर विकल्प का उपयोग किए बिना इसे मैन्युअल रूप से ट्रिगर करने के लिए फ़ंक्शन कॉल करता हूं, विशेष रूप से trigger: manual करता हूं trigger: manual और ऐसा करने के लिए सहज तरीके से एपीआई के अनुसार प्रस्तुत किया जाना चाहिए, इसलिए वांछित हल किसी भी विशिष्ट ट्रिगर के लिए विवश नहीं होना चाहिए - लेकिन कई भिन्न उपयोगों को समायोजित करने के लिए पूरी तरह से मैनुअल।

प्लंकर लिंक

<textarea ng-model="expression" intellisense></textarea>
app.directive('intellisense', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
          scope.$watch(attrs.ngModel, function (v) {
                if(v) {
                  // how do I trigger dropdown here on keystroke (model change)?
                }
            });
        }
    }
}]);

जब मेरे ऊपर एक ड्रॉपडाउन है और मैन्युअल रूप से इसे ट्रिगर करना चाहते हैं, तो मैं तत्व को एक id जोड़ता हूं:

<button id="myDropdown" type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown="dropdown">
    Click to toggle dropdown
</button>

और फिर तत्वों को ट्रिगर click() विधि click() :

$scope.dropdown = angular.element("#myDropdown");
...
$scope.dropdown.click();

डेमो -> http://plnkr.co/edit/v5AuBOiMN6TZCPE4eYk2?p=preview

इसे कोणीय-हॉटकीज़ के साथ जोड़ा जा सकता है:

hotkeys.bindTo($scope)
    .add({
        combo: '<key-combination>',
        description: '<description>',
        callback: function() {
            $scope.dropdown.click()
        }
    })

NgStrap के v2.0.4 के साथ मैन्युअल रूप से दिनांक पिक्चर (या किसी भी ड्रॉपडाउन) को ट्रिगर करना बहुत आसान है। अधिक विवरण के लिए, यह गिथूब टिप्पणी देखें।

मैन्युअल रूप से ट्रिगर किए गए ड्रॉपडाउन और मैन्युअल रूप से ट्रिगर इनलाइन एलीमेंट के रूप में, Datepicker को प्रदर्शित करने के लिए यहां कार्य करने वाला कार्य है

<input type="text" ng-model="dropdownDatepicker.date" bs-datepicker data-trigger="manual" data-bs-show="dropdownDatepicker.show">

(और आपको वास्तव में data-trigger="manual" ज़रूरत नहीं है, इसलिए यदि आप चाहें तो उसे छोड़ सकते हैं)।

Intellisense निर्देश के लिए के रूप में, यह मुद्दा यहाँ की तरह नहीं लगता है, तो मैं तुम्हें छोड़ दूँगा ...


स्रोत कोड के माध्यम से खुदाई करने के बाद, मुझे निम्नलिखित निर्देशों के साथ bsDropdown नामक bsShow bsDropdown पर एक विशेषता का पता चला।

// Visibility binding support
attr.bsShow && scope.$watch(attr.bsShow, function(newValue, oldValue) {
    if(!dropdown || !angular.isDefined(newValue)) return;
    if(angular.isString(newValue)) newValue = !!newValue.match(/true|,?(dropdown),?/i);
    newValue === true ? dropdown.show() : dropdown.hide();
});

यह अनिवार्य रूप से इसे शामिल करने के लिए ड्रॉपडाउन मार्कअप को चलाता है और इस तरह से $scope मूल्य के साथ बाँधता है

<textarea id="textdrop" ng-model="expression" intellisense bs-dropdown="dropdown" bs-show="drop"></textarea>

फिर मेरे निर्देश के भीतर मैं $scope.drop को संशोधित करके दृश्यता को ट्रिगर कर सकता $scope.drop क्योंकि bs-show="drop"

app.directive('intellisense', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
          scope.$watch(attrs.ngModel, function (v) {
                if(v) {
                  scope.drop = true; // simple - but works
                } else {
                  scope.drop = false;
                }
            });
        }
    }
}]);

ऐसा प्रतीत होता है कि यह प्रोजेक्ट प्रतिबद्धता के रूप में यहां संदर्भित किया गया था । आधिकारिक दस्तावेज अभी भी इसके बारे में लिखने का समय नहीं बताते हैं, और इस समय की अवधि को देखते हुए मुझे आश्चर्य हुआ है कि इस पर ध्यान देने की कमी है।

trigger: manual साथ प्लंकर लिंक trigger: manual





angular-strap