I only worked with angular for 2 weeks, so it was pretty new to the framework.
I am creating an application that displays data through charts, and I want the data to be displayed in different types of charts. The idea is that you can click a button and change the type of chart.
The way I did this is to render the chart through a directive using templateURL. Unfortunately, I could not create the templateURL variable. I tried different things, and here is what it looks like:
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 should display 3 different html files (lineChart.html, barChart.html and pieChart.html). however {{chartType}} is simply parsed as a string
It works when I use:
<chart charttype="lineChart"></chart>
For some reason, I can't get the charttype attribute to become a variable.
I also understand that this may be more rails to solve the angular problem (I use to render partial files). Therefore, perhaps this is not the way to do this in angular. I thought of other ways to do this, such as hide / show charts, but that seems ugly to me. However, I am ready for any suggestions.
update 1:
so I try to make it using ng-include in all the ways that I can think of, but it keeps giving me errors or not showing anything at all.
I also tried putting ng-include directly in my html file
<div ng-include="views/partials/lineChart.html"></div>
However, in my browser, I see that it is simply commenting on this line.
update 2:
I could not get ng-include to work with a variable template. So I decided to solve the problem by deleting the templates and using ng-hide in my html file.