का उपयोग $ कोणीय निर्देश

Question

में बाहरी टेम्पलेट (templateURL) पर संकलन मैं एक पुनरावर्ती कोणीय निर्देश एक टेम्पलेट चर का उपयोग करता है और link समारोह में संकलित हो जाता है कि मिल गया है।

समस्या यह है कि मेरा टेम्पलेट वास्तव में लंबा और नियंत्रण से बाहर हो गया है और मैं इसे बाहरी HTML फ़ाइल में बाहरी बनाना चाहता हूं (यह उदाहरण के लिए ऑटो इंडेंट के लिए भी आसान बना देगा)।

कैसे आप एक निर्देश है कि $compile अंदर इस्तेमाल किया जा सकता में एक बाहरी टेम्पलेट लोड कर सकते हैं?

मैंने templateURL देखा है, लेकिन यह मुझे चर का नाम नहीं देता है और इसे $compile फ़ंक्शन पर पास नहीं करता है।

var template = 
      "<p>My template</p>"+ 
      "<this-directive val='pass-value'></this-directive>"; 

return { 
    scope: { 
    ... 
    }, 
    ... 
    link: function(scope, element){ 
      element.html(template); 
      $compile(element.contents())(scope); 
     } 
} 

और

Answer 1

आप टेम्पलेट प्राप्त करने के लिए $templateRequest सेवा का उपयोग कर सकते हैं। यह एक सुविधा सेवा है जो $templateCache में टेम्पलेट को भी कैश करती है, ताकि template.html पर केवल एक ही अनुरोध किया जा सके।

एक उदाहरण के रूप में (और पुनरावर्ती निर्देशों के मुद्दे में जाने के बिना), यह इतना की तरह इस्तेमाल किया जाता है:

link: function(scope, element){ 
    $templateRequest("template.html").then(function(html){ 
     var template = angular.element(html); 
     element.append(template); 
     $compile(template)(scope); 
    }); 
}; 

plunker (नेटवर्क टैब पर भी एक नेटवर्क अनुरोध देखने के लिए)

Answer 2

मैं अगर इसके आकार बड़ा है टेम्पलेट लोड करने के लिए $ http का उपयोग करना पसंद: -

$http.get('mytemp.html').then(function(response) { 
      element.html(response.data); 
      $compile(element.contents())(scope); 
      });