Question

我创建了一个自定义指令，用于显示使用Highcharts库创建的图表。

现在我想在此指令的基础上构建并在同一视图中创建多个图表。

对于我当前的代码，这是不可能的，如下所示。

如何组织我的代码，以便可以在同一视图中将不同的数据绑定到它？

下面是一些示例代码来说明问题。

指令

 function dateChart() {
  return {
    restrict: 'AE',
    scope: {
      title: '@'
    },
    template: '<div id="chart"></div>',
    link: function(scope, element, attrs) {
      var chart;

      function createChart() {
        chart = new Highcharts.Chart({
          chart: {
          title: scope.title
        });
      }

控制器

vm.title = "My Chart";

HTML模板

  <date-chart></date-chart>

  <date-chart></date-chart>

Answer 1

首先，你需要告诉指令数据将传递

 function dateChart() {
  return {
    restrict: 'AE',
    scope: {
      title: '@'
      chartData: '='
    },
    template: '<div id="chart"></div>',
    link: function(scope, element, attrs) {
      var chart;

      function createChart() {
        chart = new Highcharts.Chart({
          chart: {
          title: scope.title
        });
      }

因此，如果您的图表数据位于$scope.someData1和$scope.someData2，您可以像这样传递：

<date-chart chart-data="someData1"></date-chart>

<date-chart chart-data="someData2"></date-chart>

在同一视图中使用相同的指令并绑定不同的数据

1 个答案: