角度变量templateURL

Question

我只使用角度工作了2周,对框架来说还是比较新的.

我正在创建一个通过图表显示数据的应用程序,我希望数据可以在不同的图表类型中查看.我们的想法是您可以单击按钮并交换图表类型.

我这样做的方法是使用templateURL通过指令渲染图表.不幸的是,我无法制作templateURL变量.我尝试了不同的东西,这就是它的外观:

main.html中:

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

指示:

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

控制器:

$scope.chartType = "lineChart";

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

该代码应该呈现3个不同的html文件(lineChart.html,barChart.html和pieChart.html).但是{{chartType}}只是被解析为一个字符串

它在我使用时有效:

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

无论出于何种原因,我都无法将charttype属性变为变量.

我也意识到这可能更像是固定角度问题的轨道方式(我习惯于渲染局部).所以也许这不是角度来做这个的方法.我已经考虑过其他方法来隐藏/显示图表,但这对我来说似乎很难看.我想要任何建议.

更新1:

所以我试图通过ng-include以我能想到的所有方式呈现它,但它一直给我错误或根本没有显示任何东西.

我也尝试将ng-include直接放入我的html文件中

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

然而,在我的浏览器中,我看到它只是评论这一行.

更新2:

我无法使用ng-include来处理变量模板.所以我决定通过删除模板并在我的html文件中使用ng-hide来解决问题.

Answer 1

一旦设置了模板 url，就不会再次调用。ng-include与变量模板一起使用

就像是

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