bootstrap ui+angular 图表：是否可以禁用图表的自动刷新？

Question

在我的应用程序中，我有两个选项卡，我们将它们简单地称为 A 和 B。

图表在选项卡 A 中。这是简单的代码：

<canvas width="100%" height="30%" style="width: 100%; height: 20%;" id="line_general" 
class="chart chart-line" chart-data="myData" 
 chart-legend="true" chart-colours="colours"
chart-labels="myLabels" chart-series="mySeries"/>

每次按下按钮时都会填充图形，此按钮也在选项卡 A 中：

$scope.buttonPressed = function(){
    $http.get('remoteURL').success(function(response, status, headers, config){
        myLabels = response.labels;
        myData = respose.data;
        ...
}

当用户在最初填充图形后切换到选项卡 B 时会出现问题，并且当此选项卡处于活动状态时，他们会调整浏览器 window 的大小。此操作会触发图上的一个事件，该事件尝试更新，但由于 bootstrap UI 的选项卡机制，它是隐藏的，因此更新不起作用并导致异常。

所以我的想法是监听选项卡更改事件，我可以通过向选项卡添加一个 select 事件来实现：

<div ng-controller="MainCtrl" class="wrapper">
    <tabset>
        <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tabChanged(tab)">
            <div ng-include="tab.content"></div>
        </tab>
    </tabset>
</div>

并且，在处理程序内部：

$scope.tabChanged = function(tab){
    if(tab.title != "A"){
        //disable refresh
    }else{
    //  re-enable refresh

    }
};

那么，有没有办法做到这一点？

Answer 1

解决方法是：每次用户切换到包含图表的选项卡时，我都会手动触发 "resize" window 事件。此事件由自动调整图形大小的图形库侦听。

$scope.tabChanged = function(tab){
if(tab.title == "A"){
    $timeout(function() {
            var evt = $window.document.createEvent('UIEvents'); 
            evt.initUIEvent('resize', true, false, $window, 0); 
            $window.dispatchEvent(evt);
        });
}
};

不是很优雅，但可以，等待库更新。

bootstrap ui+angular 图表：是否可以禁用图表的自动刷新？

bootstrap ui+angular chart: is it possible to disable graph's auto refreshing?

angularjs

angular-ui-bootstrap

chart.js

angular-chart