स्क्रॉल

Question

पर टाइपहेड परिणाम के लिए नया डेटा जोड़ें मैं angular bootstrap typeahead का उपयोग कर रहा हूं। मैं infinite scroll के लिए एक कार्यक्षमता जोड़ना चाहता हूं, इसके लिए मैंने स्क्रॉल कार्यक्षमता के लिए एक छोटा सा निर्देश जोड़ा है और typeahead टेम्पलेट में कुछ बदलाव किए हैं, निर्देश के अनुसार निर्देशों को स्क्रॉल करें लेकिन परिणाम अद्यतन होने के बाद टाइपहेड दृश्य को अद्यतन नहीं कर रहा है।

मेरे इनपुट की तरह है:

<input type="text" ng-model="variable" placeholder="Search..." typeahead="obj as obj.text for obj in getObject($viewValue)" typeahead-wait-ms="500" /> 

Typeahead टेम्पलेट:

<ul class="dropdown-menu typeahead-custom" ng-scroll="getObject('{{query}}')" ng-scroll-direction="down" ng-show="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}"> 
    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}" should-focus="isActive($index)"> 
     <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div> 
    </li> 
</ul> 

और GetObject फंक्शन:

$rootScope.lastResult = []; 
$rootScope.getObject = function(str) { 
    return $http({ 
     url: "someUrl", 
     method: "post", 
     headers: {'Content-Type': 'application/json'}, 
     data: {str: str, page_limit: 10} 
    }).then(function(response) { 
     $.merge($rootScope.lastResult, response.data.data); 
     return $rootScope.lastResult; 
    }); 
}; 

जब मैं Typeahead इनपुट में कुछ लिखते हैं यह काम करता है ठीक , लेकिन जब मैं टाइपहेड टेम्पलेट में स्क्रॉल करता हूं तो यह एक फंक्शन को कॉल करता है और lastResult वैरिएबल अपडेट करता है लेकिन टाइपहेड के DOM तत्व को अपडेट नहीं करता है।

कोई मदद? कृपया ....

Answer 1

मैंने कुछ ऐसा लिखा था लेकिन स्क्रॉल का उपयोग करने के बजाय, एक बटन क्लिक किया गया था।

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

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

Answer 2

जांचें कि क्या आप जड़ें या दायरे के बाध्यकारी चर हैं या नहीं। दायरे या जड़ें में किसी भी बदलाव के बाद बस इसे $ scope.apply() की तरह लागू करें। इसलिए यह आंतरिक रूप से $/$ digest को कॉल करेगा और इसे यूआई में प्रतिबिंबित करेगा।

Answer 3

कृपया इसे आजमाएं !!

$rootScope.lastResult = []; 
$rootScope.getObject = function(str) { 
    return $http({ 
     url: "someUrl", 
     method: "post", 
     headers: {'Content-Type': 'application/json'}, 
     data: {str: str, page_limit: 10} 
    }).then(function(response) { 
     $rootScope.$apply(function(){ 
     $.merge($rootScope.lastResult, response.data.data); 
     }); 
     return $rootScope.lastResult; 
    }); 
}; 

Answer 4

यह काम करने के लिए, मैं यूआई बूटस्ट्रैप स्रोत को संपादित करने के लिए किया था, UibTypeaheadController को एक घटना श्रोता जोड़ने। ऊपर getMatchesAsync समारोह:।

originalScope.$on('loadMore', function() { 
    hasFocus = true; 
    getMatchesAsync(modelCtrl.$viewValue); 
}); 

उपयोगकर्ता स्क्रॉल नीचे करने के लिए, मैं लोड अधिक घटना गुंजाइश फेंकना जब $ फेंकना ('loadMore')। यह स्क्रॉल पर मैचों की सूची को अपडेट करने की अनुमति देता है।