Dynamic templateUrl - AngularJS

Question

So wie von Angular 1.1.4, können Sie eine dynamische Vorlagen-URL haben. Von here,

templateUrl - Wie Vorlage, aber die Vorlage wird von der angegebenen URL geladen. Da das Laden der Vorlage asynchron erfolgt, wird die Kompilierung/Verknüpfung unterbrochen, bis die Vorlage geladen ist.

Sie können templateUrl als eine Zeichenfolge angeben, die die URL oder als eine Funktion darstellt, die zwei Argumente tElement und tAttrs (in der unten beschriebenen Kompilierfunktion api beschrieben) verwendet und einen Zeichenfolgenwert zurückgibt, der die URL darstellt.

Wie kann ich dies verwenden, um eine dynamische Vorlage basierend auf beispielsweise einem Attribut auf meiner Anweisung zu generieren? Offensichtlich funktioniert dies nicht, da tAttrs.templateType ist einfach die Zeichenfolge „Template“

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' 
    } 
} 

Da ich keinen Zugriff auf den Umfang, wie kann ich das schaffen?

Answer 1

Hier finden Sie auch die Möglichkeit zur Erstellung von dynamischen Vorlagen in AngularJS: In Ihrer Richtlinie Gebrauch:

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

nun Ihre Controller, welche Vorlage entscheiden können zu verwenden:

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

Weil Sie acc haben Sie können auch folgende Einstellungen vornehmen:

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

So könnte Ihr Server eine dynamische Vorlage für Sie erstellen.

Answer 2

So war das Problem mit, wie ich die typeahead-Direktive gehackt habe ... Ich habe eine Scope-Variable auf der Typeahead gesetzt, um in der typeaheadPopup-Direktive ausgewertet zu werden. Stattdessen übergab ich einfach den TemplateType attr direkt als String & ausgewertet. Z.B.

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

Statt "template-type='templateType'"

Answer 3

Beim Erstellen eines Dateiupload-Fallbacks für Browser, die die Datei-API (< IE10) nicht unterstützen, kam es zu einem ähnlichen Problem. Der Hauptunterschied besteht darin, dass ich die Seite brauche, um intelligent zu entscheiden, welche Vorlage angezeigt werden soll, ohne dass ein Attributwert zum Einschalten verwendet wird.

Ich endete mit der constant Anbieter für meine Richtlinie. Konstanten setzen grundsätzlich Standardparameter, die überall in Ihrer Direktive eingefügt werden können. Ich lasse einfach die Konstante eine Funktion aufrufen, um die Browserunterstützung zu bestimmen, und referenziere diesen Wert, wenn ich bestimmen muss, welche Vorlage zu ziehen ist. Das ist nett seit 1) gibt es kein Attribut zu verweisen und 2) es ist während der Pre-Link-Phase verfügbar, wenn Sie keinen Zugriff auf den Controller haben.

(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"; 
}