用作角度指令时，Highchart 不会动态调整大小答案

【问题标题】：Highchart is not resizing dynamically when used as a angular directive用作角度指令时，Highchart 不会动态调整大小
【发布时间】：2017-08-02 14:54:52
【问题描述】：

我已将 highcharts 编写为 angular 指令，如下所示：

var app = angular.module("myApp", []);
app.directive("hc", function() {
    return {
        restrict: 'E',
        template: '<div></div>',
        scope: {
            options: '='
        },
        link: function (scope, element) {
            scope.$watch('options', function(newVal, oldVal){
                if (newVal) { Highcharts.chart(element[0],scope.options);}
            });
        }
    };
});

但是在调整屏幕大小时，highchart div 没有调整大小。它始终是 600x400。如何动态调整highchart图表的大小？

这就是我使用角度指令的方式：https://jsfiddle.net/highcharts/gwukyjhj/ 但是highcharts的回流功能在这里不适用。

【问题讨论】：

你能提供一个工作的 JSFiddle 演示吗？
我认为这个话题可能会有所帮助：stackoverflow.com/questions/31754511/….
添加了示例小提琴。这就是我使用 highcharts 作为角度指令的方式。如果您调整该小提琴窗口的大小，您会看到 highcharts 回流功能不适用。图表的宽度和高度没有变化。
同样的问题。 Highcharts指令有bug，切换到变量方式

标签： angularjs highcharts

【解决方案1】：

我通过将角度元素转换为类来解决此问题。不知何故，如果我使用指令作为类而不是元素高图表回流功能。

<div class="hc" id="container"></div>

【讨论】：