template variabile in angolare

Question

Ho lavorato solo con angolare per 2 settimane, quindi abbastanza nuovo per il framework.

Sto creando un'app che mostra i dati attraverso i grafici e voglio che i dati siano visualizzabili in diversi tipi di grafici. L'idea è che puoi fare clic su un pulsante e scambiare il tipo di grafico.

Il modo in cui lo sto facendo è rendere il grafico attraverso una direttiva utilizzando templateURL. Purtroppo non sono riuscito a rendere la variabile templateURL. Ho provato cose diverse e questo è come appare atm:

main.html:

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

direttiva:

.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; 
} 

Il codice è supposto per il rendering di 3 diversi file html (lineChart.html, barChart.html & pieChart.html). tuttavia la {{}} chartType è semplicemente analizzato come una stringa

Funziona quando uso:

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

Per qualsiasi motivo non riesco a ottenere l'attributo ChartType a diventare variabile.

Mi rendo anche conto che questo potrebbe essere più un modo per correggere un problema angolare (sono abituato a rendering parziali). Quindi forse questo non è il modo di farlo in modo angolare. Ho pensato ad altri modi per farlo come nascondere/mostrare le classifiche, ma questo mi sembra brutto. Comunque, ho qualche suggerimento.

aggiornamento 1:

così sto cercando di renderlo tramite ng-includere in tutti i modi che posso pensare, ma continua a darmi errori o non mostra nulla.

ho provato anche mettere il ng-includono direttamente nel mio file html

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

Tuttavia nel mio browser vedo solo commenta questa linea.

aggiornamento 2:

non ho potuto ottenere ng-comprendono a lavorare con un modello variabile. Quindi ho deciso di risolvere il problema rimuovendo i modelli e usando ng-hide nel mio file html.

Answer 1

Una volta impostato l'URL modello, non viene richiamato.Utilizzare ng-include con il modello variabile

Qualcosa di simile

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

Answer 2

Il parametro templateUrl della direttiva non può ottenere il valore variabile come argomento, solo testo statico. se vuoi, posso mostrare la soluzione con la direttiva ng-include nel parametro template della direttiva.