ng-highcharts 的响应行为，编译后的 ng-click 加载时隐藏了 xAxis 标签

Question

我在选项卡中有一些 ng-highcharts，页面上的折叠部分也根据下拉选择显示。所有图表都需要适合其容器的大小（容器大小不同）。

其中一个图表上的 xAxis 标签添加了一个 ng-click，它与超时一起工作并在加载时编译，但是当图表在调整大小时重新绘制时，这些标签会丢失。

需要全宽图表以及加载时隐藏的所有图表的响应行为，以及在调整大小后保持 ng-click。

jQuery NOT 用于该项目，因此寻找 angular / 本地 javascript 解决方案。

在下面处理 fiddle 当前问题的示例。

以下将更新图表的宽度，但会破坏所有已编译的 ng-click 标签。

$scope.collapseClick = function() {
    console.log('collapse click');
    //$scope.projectionChartConfig.options.chart.width = null;
}

Answer 1

向 window 添加了调整大小事件。在显示图表或调整大小时更新图表的宽度参数。还在超时内编译以在需要时保持 ng-click 标签。

$scope.collapseClick = function() {
    console.log('collapse click');
    $scope.projectionChartConfig.options.chart.width = null;

    $timeout( function() {        
        var element = document.getElementById("chart1");
        console.log(element);
        $compile(element)($scope)
    }); 
}

// Listen to window resize and update width.
$scope.$on('window.resize', function() {
    console.log('resize');
    $timeout( function() {        
        var element = document.getElementById("chart1");
        console.log(element);
        $compile(element)($scope)
    }); 
});

http://jsfiddle.net/7efavzh2/3/

ng-highcharts 的响应行为，编译后的 ng-click 加载时隐藏了 xAxis 标签

Responsive behaviour for ng-highcharts with compiled ng-click on xAxis labels hidden on load

javascript

angularjs

highcharts