更改使用HighChart呈现AngularJS的指令

Question

我正在使用角指令渲染高图表可视化，并试图改变使用的指令，根据用户的输入。用于测试，尝试在行图和列图之间切换。这些指令是：

myApp.directive('columnChart', function () {
return function (scope, element, attrs) {
    initChart();
    function initChart() {
        var chartConfig = {
            chart: {
                type: 'column',
                zoomType: 'xy'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: [{
                min: 0,
                title: {
                    text: 'Y Axis Label'
                    },
            }],
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }]
        };
        var chart = $(element).highcharts(chartConfig);
    }
};
});

和

myApp.directive('lineChart', function () {
return function (scope, element, attrs) {
     initChart();

 function initChart() {
        var chartConfig = {
            chart: {
                type: 'line',
                zoomType: 'xy'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: [{
                min: 0,
                //max:200,
                title: {
                    text: 'Y Axis Label'
                    },
            }],
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }]
        };
        var chart = $(element).highcharts(chartConfig);
    }
};
});

我有一个简单的测试页面，它的按钮可以更改指令：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div ng-controller="MyCtrl">
    <button ng-click="setLineChart()">Set Line Chart</button>
    <button ng-click="setColumnChart()">Set Column Chart</button>
    <div id="container" column-Chart style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>

以及设置指令的代码：

$scope.setLineChart = function() {
    var docElement = document.getElementById("container");
    var scope = angular.element(docElement).scope();
    var element = angular.element(docElement);
    element.html('<div id="chartContainer" line-Chart style="min-width: 400px; height: 400px; margin: 0 auto"></div>');
    console.log("element: " , element);
    $compile(element)(scope);
};

单击“设置线图”按钮将调用“线图指示”，但该图表仍然被解析为列图表。

下面是jsfiddle：https://jsfiddle.net/MFRTest/xsadzv4f/12/

我很感激任何对我所缺少的东西的洞察力

Answer 1

使用AngularJS框架，避免在控制器中操作DOM。框架分离关注点使应用程序更容易理解、调试、测试和维护。

相反，有一个基于Controller提供的模型创建高图集的指令：

app.directive("highchart", function() {
  return {
    link: postLink
  }
  function postLink(scope, elem, attrs) {
    scope.$watch(attrs.highchart, function (chartConfig) {
      elem.highcharts(chartConfig);
    }, true)
  }
})

用法：

<button ng-click="$ctrl.chart = $ctrl.lineChart">Set Line Chart</button>
<button ng-click="$ctrl.chart = $ctrl.colChart">Set Column Chart</button>

<div highchart="$ctrl.chart" 
     style="min-width: 300px; height: 300px; margin: 0 auto">
</div>

演示

​

angular.module("app",[])

.directive("highchart", function() {
  return {
    link: postLink
  }
  function postLink(scope, elem, attrs) {
    scope.$watch(attrs.highchart, function (chartConfig) {
      elem.highcharts(chartConfig);
    })
  }
})

.controller("ctrl", function() {
  this.colChart = {
        chart: {
          type: 'column',
          zoomType: 'xy'
        },
        title: {
          text: ''
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
          ]
        },
        yAxis: [{
          min: 0,
          //max:200,
          title: {
            text: 'Y Axis Label'
          },
        }],
        series: [{
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
      };
  this.lineChart = {
            chart: {
                type: 'line',
                zoomType: 'xy'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: [{
                min: 0,
                //max:200,
                title: {
                    text: 'Y Axis Label'
                    },
            }],
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }]
        };
})

    <script src="//unpkg.com/jquery"></script>
    <script src="//unpkg.com/highcharts"></script>
    <script src="//unpkg.com/angular/angular.js"></script>
    
  <body ng-app="app" ng-controller="ctrl as $ctrl">
    <h3>Highchart Directive DEMO</h3>
    <button ng-click="$ctrl.chart = $ctrl.lineChart">
      Set Line Chart
    </button>
    <button ng-click="$ctrl.chart = $ctrl.colChart">
      Set Column Chart
    </button>
    <div highchart="$ctrl.chart" 
         style="min-width: 300px; height: 180px; margin: 0 auto">
    </div>
  </body>

​