जब दृश्य बदल जाता है तो AngularJS से JQuery फ़ंक्शन को कॉल करने के लिए कैसे करें

Question

मैं AngularJS के लिए नया हूं, और मैं अपने आवेदन में jQuery custom content scroller को लागू करते समय एक समस्या से निपट रहा हूं।

मुझे स्क्रॉलर को अद्यतन करने की आवश्यकता है, जब मैं कोणीय के साथ सामग्री को अद्यतन करता हूं, इसके लिए स्क्रोलर के पास update विधि है। मेरी समस्या यह है कि मुझे नहीं पता कि इसे कहां कॉल करना है।

<div class="scroll-list nice-scrollbars"> 
    <ul class="gallery clearfix"> 
     <li class="extra-alt" ng-repeat="item in relatedItems.data"> 
      ... 
     </li> 
    </ul> 
</div> 

मैं कोणीय के $http.post की सफलता शाखा में अद्यतन विधि कॉल करने के कोशिश कर रहा था: सामग्री के लिए मार्कअप निम्नलिखित है

$scope.relatedItems = $http.post($scope.url, { 
    'filterType': 'related', 'film': id 
}).success(function() { 
    $(".nice-scrollbars").mCustomScrollbar('update'); 
}); 

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

स्क्रोलबार के काम को करने में सक्षम एकमात्र तरीका स्क्रोलर का उपयोग कर रहा था लाभ सामग्री में परिवर्तन (ये विकल्प स्क्रॉलबार के लिए पारित कर रहे हैं) को देखने के लिए CED संपत्ति:

var scrollbarOpts = { 
    scrollButtons:{ 
     enable:true 
    }, 
    advanced:{ 
     updateOnContentResize: true 
     //@TODO: get rid of this, correctly find where to call update method 
    } 
} 

यह, बुरा व्यवहार है के रूप में इस विकल्प पूरी स्क्रिप्ट का प्रदर्शन कम कर देता है। मैं जानना चाहता हूं कि आवश्यकतानुसार डीओएम अपडेट करने के लिए जरूरी jQuery विधियों को कॉल करने के लिए सही जगह कहां है, या AngularJS में सही ढंग से किए गए परिवर्तनों को देखने के लिए बाध्यकारी कैसे है?

Answer 1

डीओएम हेरफेर निर्देश (नियंत्रक नहीं) में किया जाना चाहिए। निर्देशों को आपके मॉडल को परिवर्तनों के लिए $ (देखना चाहिए), और घड़ी कॉलबैक को jQuery DOM मैनिपुलेशन करना चाहिए। कभी-कभी एंगुलर ने डीओएम को अपडेट/संशोधित करने के बाद jQuery कोड चलाने के लिए $ evalAsync की आवश्यकता होती है (लेकिन ब्राउज़र प्रस्तुत करने से पहले। यदि आप ब्राउज़र प्रस्तुत करने के बाद कुछ क्रियाएं करना चाहते हैं तो $timeout का उपयोग करें)। this answer देखें, जहां मैंने दिखाया कि एक मॉडल प्रॉपर्टी ($) के निर्देश का उपयोग कैसे करें, और मैंने एक मैक fetch() फ़ंक्शन में $ evalAsync का उपयोग किया।

अपने विशेष मामले के लिए, मैं सुझाव है कि आप पहले एक निर्देश में, निम्नलिखित का प्रयास करें:

scope.$watch("relatedItems.data", function() { 
    $(".nice-scrollbars").mCustomScrollbar('update'); 
}); 

और है कि अगर काम नहीं करता है, इस प्रयास करें:

scope.$watch("relatedItems.data", function() { 
    scope.$evalAsync( // you might need to wrap the next line in a function, not sure 
     $(".nice-scrollbars").mCustomScrollbar('update') 
    ); 
});