0

在我的应用程序中，我有两个选项卡，我们简单地称它们为 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 并且在此选项卡处于活动状态时，他们会调整浏览器窗口的大小时，就会出现问题。此操作会在图表上触发一个尝试更新的事件，但由于引导 UI 的选项卡机制而将其隐藏，因此更新不起作用并导致异常。

所以我的想法是监听选项卡更改事件，我可以通过向选项卡添加一个选择事件来做到这一点：

<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

    }
};

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

4

1 回答 1

0

通过解决方法解决：每次用户切换到包含图形的选项卡时，我都会手动触发“调整大小”窗口事件。此事件由自动调整图形大小的图形库侦听。

$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);
        });
}
};

不是很优雅，但它会做，等待库更新。

于 2015-09-22T08:52:01.867 回答