गतिशील टेम्पलेट यूआरएल - कोणीयजेएस

Question

तो कोणीय 1.1.4 के रूप में, आपके पास गतिशील टेम्पलेट यूआरएल हो सकता है। here,

टेम्पलेटउआरएल - टेम्पलेट के समान - लेकिन टेम्पलेट निर्दिष्ट यूआरएल से लोड किया गया है। चूंकि टेम्पलेट लोडिंग असीमित है क्योंकि संकलन लोड होने तक संकलन/लिंकिंग को निलंबित कर दिया जाता है।

आप URLUrl को यूआरएल का प्रतिनिधित्व करने वाली स्ट्रिंग के रूप में निर्दिष्ट कर सकते हैं या एक फ़ंक्शन के रूप में निर्दिष्ट कर सकते हैं जो दो तर्क लेता है और tAttrs (नीचे संकलन फ़ंक्शन एपीआई में वर्णित) और यूआरएल का प्रतिनिधित्व करने वाला एक स्ट्रिंग मान देता है।

मैं अपने निर्देश पर एक विशेषता के आधार पर गतिशील टेम्पलेट उत्पन्न करने के लिए इसका उपयोग कैसे कर सकता हूं? जाहिर है यह काम नहीं करता है, क्योंकि tAttrs.templateType बस स्ट्रिंग "templateType"

templateUrl: function (tElement, tAttrs) { 
    if (tAttrs.templateType == 'search') { 
    return '/b/js/vendor/angular-ui/template/typeahead/typeahead.html' 
    } else { 
    return '/b/js/vendor/angular-ui/template/typeahead/typeahead2.html' 
    } 
} 

यह देखते हुए कि मैं गुंजाइश के लिए पहुँच नहीं है है, मैं यह कैसे प्रबंधित करते हैं?

Answer 1

निम्नलिखित AngularJS में गतिशील टेम्पलेट्स बनाने के लिए भी संभव है

$scope.getTemplateUrl = function() { 
    return '/template/angular/search'; 
}; 

क्योंकि आपके पास acc है अपने स्कोप पैरामीटर के लिए निबंध, आप यह भी कर सकते हैं:

$scope.getTemplateUrl = function() { 
    return '/template/angular/search/' + $scope.query; 
}; 

तो आपका सर्वर आपके लिए गतिशील टेम्पलेट बना सकता है।

Answer 2

तो समस्या यह थी कि मैंने टाइपहेड निर्देश कैसे हैक किया था ... मैं टाइपहेड पर एक स्कोप चर सेट कर रहा था, टाइप टाइपहेडपॉप निर्देश पर मूल्यांकन किया जा सकता था। इसके बजाए, मैंने टेम्पलेट टाइप टाइप को सीधे स्ट्रिंग & के रूप में पारित किया है। जैसे अपने निर्देश उपयोग में::

template : '<div ng-include="getTemplateUrl()"></div>' 

अब आप अपने नियंत्रक जो टेम्पलेट का उपयोग करने का फैसला कर सकता:

var popUpEl = angular.element(
    "<typeahead-popup " + 
    "matches='matches' " + 
    "active='activeIdx' " + 
    "select='select(activeIdx)' " + 
    "template-type='" + attrs.templateType + "'" + 
    "query='query' " + 
    "position='position'>" + 
    "</typeahead-popup>"); 

के बजाय "template-type='templateType'"

Answer 3

फ़ाइल एपीआई (< आईई 10) का समर्थन नहीं करने वाले ब्राउज़र के लिए फ़ाइल अपलोड फ़ॉलबैक बनाने के दौरान एक समान समस्या में भाग लें। मुख्य अंतर यह है कि मुझे समझने के लिए पृष्ठ की आवश्यकता है कि किस टेम्पलेट को स्विच करने के लिए एक विशेषता मान के लाभ के बिना प्रदर्शित किया जाए।

मैं अपने निर्देश के लिए constant प्रदाता का उपयोग कर समाप्त हुआ। कॉन्स्टेंट मूल रूप से डिफ़ॉल्ट पैरामीटर सेट करते हैं जिन्हें आपके निर्देश में कहीं भी इंजेक्शन दिया जा सकता है। मैं बस ब्राउज़र समर्थन को निर्धारित करने के लिए निरंतर एक फ़ंक्शन को कॉल करने देता हूं, फिर उस मान को संदर्भित करता हूं जब मुझे यह निर्धारित करने की आवश्यकता होती है कि कौन सा टेम्पलेट खींचने के लिए है। यह से अच्छा है 1) संदर्भ में कोई विशेषता नहीं है और 2) यह पूर्व-लिंक चरण के दौरान उपलब्ध है जब आपके पास नियंत्रक तक पहुंच नहीं है।

(function() { 
    var myDir = angular.module('myDir', []); 
    myDir.constant('myDirConfig', { 
     hasFileSupport: fileApiIsSupported() 
    }); 

    myDir.directive('myDir', ['myDirConfig', function (myDirConfig) { 
     return { 
      templateUrl: function() { 
       if (myDirConfig.hasFileSupport) { 
        return 'pathToTemplate/html5.html'; 
       } else { 
        return 'pathToTemplate/fallback.html'; 
       } 
      } 
     }; 
    }]; 

    function fileApiIsSupported() { return (...); } 
})(); 

Answer 4

templateUrl: function (elem, attrs) { 
return attrs["template"] == "table" ? 
"tableTemplate.html" : "itemTemplate.html"; 
}