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.

Chandermani · Accepted Answer · 2015-04-21 09:26:46Z

2

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>"

answered Apr 21, 2015 at 9:26

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chandermani Over a year ago

@mischa if you directly reference a url you need to put it in quotes such as <div ng-include="'views/partials/lineChart.html'"></div>. The expression is evaluated in context of current scope.

YD1m · Accepted Answer · 2015-04-21 09:23:34Z

1

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.

answered Apr 21, 2015 at 9:23

YD1m

5,9152 gold badges22 silver badges25 bronze badges

1 Comment

Mischa Over a year ago

I've tried the ng-include solution before but for whatever reason the charts wouldn't show up. I suspect angular-chart.js has a problem with this approach. But i would like to see your solution

Collectives™ on Stack Overflow

variable templateURL in angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related