एंगुलरजेस - चार्ट्स.जेएस: समान चार्ट तत्व अन्य दृश्यों पर दोबारा नहीं खींचा जाता है

Question

मैं अपना पहला निर्देश बनाने की कोशिश कर, कोणीय के लिए नया हूं। मैं अपने आवेदन में Charts.js2.0 (बीटा) लोड करने के लिए एक निर्देश बना रहा हूँ।

मेरे पासद्वारा प्रबंधित 2 दृश्य हैं, दोनों HTML व्यू में एक HTML पृष्ठ शामिल है जिसमें केवल चार्ट-तत्व शामिल है।

समस्या यह है कि पहला पृष्ठ सही ढंग से चार्ट खींचता है, जब मैं अन्य दृश्यों पर जाता हूं तो चार्ट div लोड होता है लेकिन चार्ट फिर से खींचे नहीं जाते हैं। और अब अगर मैं पहले इसे खाली करने के लिए वापस जाता हूं।

Plunker

मैं गलत क्या कर रहा हूँ के लिए लिंक? क्या मेरे निर्देश के साथ कोई मुद्दा है?

अग्रिम धन्यवाद।

Answer 1

वहाँ चार्ट पुस्तकालय जड़ गुंजाइश पर मौजूदा ऑब्जेक्ट को संशोधित करने, और इस तरह यह हमेशा के लिए बाद में अनदेखी के साथ कोई समस्या प्रतीत होता है में मदद करता है। मैं वास्तव में नीचे ट्रेस कर सकते हैं नहीं यह क्या कर रहा है, लेकिन यहाँ आप के लिए एक ठीक है: http://plnkr.co/edit/jDQFV62FSeXAQJ6o7jE8

यहाँ तुम क्या

scope.$watch('config', function(newVal) { 
    if(angular.isDefined(newVal)) { 
     if(charts) { 
     charts.destroy(); 
     } 
     var ctx = element[0].getContext("2d"); 
     charts = new Chart(ctx, scope.config); 
     //scope.$emit('create', charts); 
    } 
    }); 

से ऊपर था, जैसा कि आप देख सकते हैं कि आप में सीधे scope.config गुजर रहे हैं चार्ट विधि। ऐसा लगता है कि किसी भी तरह से डेटा को संशोधित किया जा रहा है, और चूंकि यह संदर्भ द्वारा पारित किया गया है, इसलिए आप वास्तव में $rootScope.sales.charts संशोधित कर रहे हैं। यदि आप उस ऑब्जेक्ट की प्रतिलिपि बनाते हैं और इसे नीचे स्थानीय रूप से उपयोग करते हैं, तो आपको वह समस्या नहीं है।

यहां बताया गया है कि मैंने इसे कैसे ठीक किया।

scope.$watch('config', function(newVal) { 
    var config = angular.copy(scope.config); 
    if(angular.isDefined(newVal)) { 
     if(charts) { 
     charts.destroy(); 
     } 
     var ctx = element[0].getContext("2d"); 
     charts = new Chart(ctx, config); 
     //scope.$emit('create', charts); 
    } 
    }); 

आप देख सकते हैं कि पासिंग कि सीधे में, हम एक प्रति (angular.copy()) बनाने के लिए कोणीय का उपयोग वस्तु के बजाय, और उस वस्तु हम में भेज देते हैं।

Answer 2

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

अपने प्लूकर पर एक नज़र डालने पर मुझे लगता है कि आप ग्राफ के लिए एक ही एचटीएमएल का उपयोग कर रहे हैं और मुझे लगता है कि जब आपके विचारों में से एक से कोणीय चाल दूसरे सोचता है कि ग्राफ पहले ही खींचा गया है। दो ग्राफ को अलग करने से समस्या हल हो जाएगी। मुझे नहीं पता कि कोई अन्य दृष्टिकोण है जो ग्राफ के कैनवास के लिए एक ही एचटीएमएल का उपयोग करने की अनुमति देता है।

आशा है कि यह आप का समाधान यह