कैसे विशेषता

Question

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

<div cell-item template="{{col.CellTemplate}}"></div> 

आदर्श रूप में निर्देश होगा:

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      scope: { 
       template: '@template' 
      }, 
      templateUrl: template // or {{template}} - either way 
     }; 
    }]) 

हालांकि यह काम नहीं करता। मैंने एक ही अवधारणा को पूरा करने में कई अलग-अलग क्रमिक प्रयास किए हैं, और यह निकटतम लगता है, हालांकि यह अभी भी काम नहीं करता है।

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      scope: { 
       template: '@template' 
      }, 
      link: function (scope, element, attrs) { 
       var templateUrl = $parse(attrs.template)(scope); 
       $http.get(templateUrl, { cache: $templateCache }).success(function (tplContent) { 
        element.replaceWith($compile(tplContent)(scope)); 
       }); 
      } 
     }; 
    }]) 

मैंने एनजी-इन का उपयोग करने का भी प्रयास किया है, लेकिन यह संकलन से पहले स्कोप चर का मूल्यांकन भी नहीं करता है। CellTemplate मान डेटाबेस कॉल से आ रहा है, इसलिए मूल्यांकन से पहले पूरी तरह से अज्ञात है। इस काम को पाने के लिए कोई सुझाव बहुत सराहना की जाएगी!

संपादित करें: मैं कोणीय 1.0.8 का उपयोग कर रहा है और एक नए संस्करण में अपग्रेड कर पा रहा हूँ।

Answer 1

आप बिल्कुल दूर नहीं हैं।

आप निर्देश के लिए एक अलग दायरे का उपयोग करने की जरूरत नहीं है। आप templateUrl इस तरह पारित कर सकते हैं: यदि आप ऐसा नहीं करते हैं http://plnkr.co/edit/n20Sxq?p=preview

Answer 2

:

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      restrict: 'A', 
      link: function(scope , element, attrs) { 

       scope.$watch(attrs.template, function (value) { 
       if (value) { 
        loadTemplate(value); 
       } 
       }); 

       function loadTemplate(template) { 
        $http.get(template, { cache: $templateCache }) 
        .success(function(templateContent) { 
         element.replaceWith($compile(templateContent)(scope));     
        });  
       } 
      } 
     } 
    }]); 

यहाँ एक काम Plunker है:

<div cell-item template="col.CellTemplate"></div> 

तब पता लगाने के लिए जब टेम्पलेट मूल्य परिवर्तन एक घड़ी जोड़ने खुद को लिंकिंग तर्क से निपटना चाहते हैं, या आप अलग-अलग गुंजाइश चाहते हैं, मुझे लगता है कि यह आसान है:

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      scope: { 
       template: '@template' 
      }, 
      template: "<div ng-include='template'></div>" 
     }; 
    }]) 

या:

template:"<ng-include src='template'></ng-include>" 

Answer 3

यह एक पुरानी पोस्ट है, लेकिन मैं अपनी उपयोगी विचार था कि यदि किसी को भी यहाँ जवाब के लिए उतरता।

तुम एक टिप्पणी में आपका उल्लेख @caub रूप templateUrl समारोह की कोशिश कर सकते हैं। घटकों के लिए भी इस्तेमाल किया जा सकता है।

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
    return { 
     templateUrl: function(element, attrs) { 
      return attrs.template || 'someDefaultFallback.html'; 
     } 
    }; 
}]); 

हमें यहां इंजेक्शन निर्भरताओं की आवश्यकता नहीं है। उम्मीद है कि यह किसी की मदद करता है।