variable templateURL in angular

Question

I've only been working with angular for 2 weeks so fairly new to the framework.

I'm making an app that shows data through charts, and i want the data to be viewable in different chart types. The idea is that you can click a button and swap the chart type.

The way i've been doing this is by rendering the chart through a directive using templateURL. Unfortunatly i've been unable to make the templateURL variable. I've tried different things and this is how it looks atm:

main.html:

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

directive:

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

The code is supposed to render 3 different html files (lineChart.html, barChart.html & pieChart.html). however the {{chartType}} is simply parsed as a string

It works when i use:

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

For whatever reason i can't get the charttype attribute to become variable.

I also realize this might be more of a rails way of fixing an angular problem (i'm used to rendering partials). So maybe this is not the way to do this in angular. I've thought about other ways to do this like hide/show the charts but this just seems ugly to me. I'm up for any suggestions though.

update 1:

so i'm trying to render it via ng-include in all the ways i can think of but it keeps giving me errors or doesn't show anything at all.

i've also tried putting the ng-include directly into my html file

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

However in my browser i see it just comments this line out.

update 2:

I couldn't get ng-include to work with a variable template. So i've decided to solve the problem by removing the templates and using ng-hide in my html file instead.

Answer 1

Once the template url is set, it is not called again. Use ng-include with variable template

Something like

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

Answer 2

Directive templateUrl parameter can't get variable value as argument, just static text. if you want, i can show solution with ng-include directive in directive template parameter.