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＆amp; 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

设置模板网址后，不会再次调用它。将ng-include与变量模板

一起使用

像

这样的东西

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

Answer 2

指令templateUrl参数不能将变量值作为参数，只是静态文本。如果你愿意，我可以在指令template参数中使用ng-include指令显示解决方案。

角度变量templateURL

2 个答案: