Question

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

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

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

jQuery NOT 用于此项目，因此正在寻找一个角度/原生javascript解决方案。

下面的工作小提琴以及当前问题的例子。

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

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

Answer 1

向窗口添加了resize事件。显示图表或调整大小更新图表的宽度参数。还要在超时时间内进行编译，以便在需要时保持点击标签。

$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的响应行为，在加载时隐藏的xAxis标签上编译了ng-click

1 个答案: