variable VorlageURL in eckig

Question

Ich habe erst seit 2 Wochen mit eckig gearbeitet, also ziemlich neu im Framework.

Ich mache eine App, die Daten durch Diagramme zeigt, und ich möchte, dass die Daten in verschiedenen Diagrammtypen angezeigt werden können. Die Idee ist, dass Sie auf eine Schaltfläche klicken und den Diagrammtyp austauschen können.

Die Art, wie ich dies getan habe, ist das Rendern des Diagramms durch eine Direktive mit templateURL. Leider konnte ich die templateURL-Variable nicht erstellen. Ich habe verschiedene Dinge ausprobiert, und das ist, wie es atm aussieht:

main.html:

<chart charttype="{{chartType}}"></chart> 

Richtlinie:

.directive("chart", function() { 
    return { 
    restrict: 'E', 
    templateUrl: function (element, attrs) { 
     return 'views/partials/' + attrs.charttype + '.html'; 
    } 
} 

Controller:

$scope.chartType = "lineChart"; 

$scope.ChangeChart = function (chartType) { 
    $scope.chartType = chartType; 
} 

Der Code ist soll 3 verschiedene HTML-Dateien rendern (lineChart.html, barChart.html & pieChart.html). aber die {{}} charttype einfach als Zeichenfolge analysiert

Es funktioniert, wenn ich benutze:

<chart charttype="lineChart"></chart> 

Aus irgendeinem Grund, den ich nicht das Attribut Charttype bekommen kann variabel zu sein.

Ich erkenne auch, dass dies mehr eine Art Schiene sein könnte, um ein eckiges Problem zu beheben (ich bin es gewohnt, Teiltöne zu erzeugen). Also vielleicht ist dies nicht der Weg, dies in eckigen zu tun. Ich habe über andere Möglichkeiten nachgedacht, wie die Charts zu verstecken/zu zeigen, aber das scheint mir nur hässlich zu sein. Ich bin jedoch für irgendwelche Vorschläge bereit.

Update 1:

so versuche ich es über machen ng-umfasst die Art und Weise alles, was ich denken kann, aber es hält mir eine Fehlermeldung oder nicht zeigt überhaupt nichts.

i auch die versucht haben, setzen ng-include direkt in meine HTML-Datei

<div ng-include="views/partials/lineChart.html"></div> 

jedoch in meinem Browser ich sehe es gerade diese Linie heraus kommentiert.

Update 2:

ich nicht bekommen konnte ng-umfassen mit einer variablen Vorlage zu arbeiten. Also habe ich beschlossen, das Problem zu lösen, indem ich die Vorlagen entferne und stattdessen ng-hide in meiner HTML-Datei verwende.

Answer 1

Sobald die Vorlagen-URL festgelegt wurde, wird sie nicht erneut aufgerufen.Verwenden Sie ng-include mit variabler Vorlage

So etwas wie

template: "<div ng-include=\"'views/partials/' + charttype + '.html'\"></div>"

Answer 2

Direktive templateUrl Parameter kann keinen Variablenwert als Argument erhalten, nur statischer Text. Wenn Sie möchten, kann ich Lösung mit ng-include-Direktive in Richtlinie template Parameter zeigen.