2012-11-19 17 views
32

मैं कई निर्देशों के साथ एक AngularJS ऐप पर काम कर रहा हूं। निर्देश के टेम्पलेट्स को एक अलग HTML फ़ाइल में संग्रहीत किया जाता है। इन टेम्पलेट को संपादित करते समय, मेरे ब्राउज़र को पुनः लोड करने के बाद किसी भी बदलाव का पता नहीं लगाता है और हमेशा कैश किए गए संस्करण का उपयोग करता है। स्रोत कोड में कोई अन्य परिवर्तन पता चला है और एक रीलोड का कारण बनता है।निर्देश के टेम्पलेट का बल पुनः लोड

मुझे लगता है कि समस्या कुछ हद तक $ टेम्पलेट कैश है जो टेम्पलेट लोड करते समय AngularJS द्वारा उपयोग किया जाता है।

$http.get(origAsyncDirective.templateUrl, {cache: $templateCache}) 

मैं सोच रहा हूँ अगर किसी और को इस तरह की समस्या थी और:

मैं AngularJS 1.0.2 के स्रोत कोड में क्या पाया लाइन 4317 जो compileTemplateUrl() का हिस्सा है से पीछा कर रहा है अगर AngularJS को कैश करने के लिए और कब नहीं कहने का कोई तरीका है।

उत्तर

15

टेम्पलेट कैश आपके ब्राउज़र में संग्रहीत है, क्योंकि यह एक जावास्क्रिप्ट ऐप है। आप वास्तव में $ कैश को मैन्युअल रूप से खिला सकते हैं या डेवलपर टूल का उपयोग करके टेम्पलेट को कैशिंग करने से रोक सकते हैं (जैसा कि यह प्रतीत होता है कि उत्पादन के लिए, कैश कोई समस्या नहीं होगी)।

बल कैश खिला के लिए:

यह इस fiddle में काम कर देखें।

टेम्पलेट्स को संचित करने से आपके ब्राउज़र को रोकने के लिए (इस Google Groups post से उद्धृत, इस समस्या के बारे में, वास्तव में):

मेरी टीम और मैं इस एक ही मुद्दा में भाग लिया है। क्रोम का उपयोग करते समय विकास के लिए हमारा समाधान डेवलपर टूल्स खोलना था, और निचले दाएं कोने में गियर को चुनें। फिर नेटवर्क का चयन करें - कैश अक्षम करें।

यह हमारे सभी आंशिक/टेम्पलेट कैशिंग मुद्दों को ठीक करता है।

+14

यह वास्तव में है कि ब्राउज़ वेबसाइट पर अभी भी कैश्ड लोड उपयोगकर्ता के रूप में अपने स्थानीय क्रोम संस्करण के लिए क्रोम में कैशिंग निष्क्रिय करने के लिए मेरी समस्या का समाधान नहीं करता कारण संस्करण। –

+2

(डबल टिप्पणी के लिए खेद है, लेकिन मैं इसे और संपादित नहीं कर सका ...) टेम्पलेट को फिर से लोड करने के लिए कैश को मजबूर करना हर बार मेरे लिए एक हैक जैसा दिखता है। लेकिन मुझे लगता है कि मेरे पास कोई विकल्प नहीं है। मेरे स्थानीय क्रोम संस्करण के लिए क्रोम में कैशिंग को अक्षम करना केवल मेरे लिए समस्या हल करता है।वेबसाइट ब्राउज़ करने वाले अन्य विज़िटर अभी भी कैश किए गए संस्करण को लोड करते हैं। उत्पादन मोड में अपडेट तब तक दिखाई नहीं देते जब तक कि उपयोगकर्ता अपने कैश को साफ़ नहीं करता। –

+0

ठीक है, मैं अपने AngularJS परियोजनाओं के लिए Yeoman उपयोग करते हैं, तो तैनात फ़ाइलों उनके नाम पहले से जुड़ा हुआ हैश की है। यही कारण है कि कैश वास्तव में नहीं एक मुद्दा बना देता है, के रूप में अनुप्रयोग के लिए किसी भी बुनियादी बदलाव तुरंत पहचाने जाते हैं (फ़ाइल भिन्न नाम हैं)। परीक्षण के लिए, मैं यमन का भी उपयोग करता हूं, और यह सभी संपत्तियों के पुनः लोड को मजबूर करता है। –

36

मुझे पता है कि यह एक पुराना सवाल है, लेकिन यहां एक आसान फिक्स है, हालांकि यह एक हैक का थोड़ा सा है, यह मेरे लिए काम करता है, और आपको $ टेम्पलेट कैश में कुछ भी करने की आवश्यकता नहीं है।

जब भी मैं इस समस्या में पड़ (मैं इसे निर्देश टेम्पलेट्स में देखते हैं, लेकिन यह भी स्थिर JSON फ़ाइलें), मैं URL के अंत में एक क्वेरी पैरामीटर जोड़ने लोड किए जा रहे, इस तरह:

... 
templateUrl: "partials/template.html?1", 
... 

जब भी मैं टेम्पलेट में बदलाव करता हूं, और यह पुनः लोड नहीं होता है, मैं अंत में उस संख्या को बढ़ाता हूं। चूंकि ब्राउज़र को पता नहीं है कि इसका मतलब सर्वर के लिए कुछ खास हो सकता है, तो उसे उस बदले गए यूआरएल को फिर से लोड करने का प्रयास करना चाहिए चाहे वह कैश किया गया हो या नहीं। इससे यह भी सुनिश्चित होगा कि फ़ाइल को उत्पादन वातावरण में पुनः लोड किया गया है।

+7

:) और आप एक चर वर v = "1" का उपयोग कर सकते हैं कई टेम्पलेट्स है; $ routeProvider.when ('/', {templateUrl: '/pages/home.html?v=' + v, नियंत्रक: 'HomeCtlr'}); – dpineda

+1

'" आंशिक/टेम्पलेट.html? " + Date.now() 'मेरे लिए पूरी तरह से काम किया। – mhodges

1
app.controller('someCtrl', function ($scope, $cacheFactory, templateRequest) 
{ 
    $scope.refreshTemplate = function() 
    { 
     var tpl = "<template name>"; 
     $cacheFactory.get('templates').remove(tpl); 
     $templateRequest(tpl).then(function ok(){ 
      console.log("Template "+tpl+" loaded."); 
     }); 
    } 
    ... 
    } 

फिर जब आप refreshTemplate फ़ंक्शन को कॉल आप एक फिर से लोड

+0

मैं नहीं जानता कि क्यों यह स्वीकार किए जाते हैं जवाब नहीं है ... के रूप में उम्मीद काम करता है ... – Scriptlabs

संबंधित मुद्दे