bootstrap ui + angular chart: можно ли отключить автоматическое обновление графика?

В моем приложении есть две вкладки, назовем их просто 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 после первоначального заполнения графика и, пока эта вкладка активна, изменяет размер окна браузера. Это действие запускает событие в графе, которое пытается обновиться, но, поскольку оно скрыто из-за механизма вкладок пользовательского интерфейса начальной загрузки, обновление не работает и вызывает исключение.

Итак, моя идея заключалась бы в том, чтобы прослушивать событие смены вкладки, я могу сделать это, добавив событие выбора на вкладки с помощью:

<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

    }
};

Итак, есть ли способ сделать это?


chart.js angularjs angular-ui-bootstrap angular-chart
person Phate    schedule 18.09.2015    source источник
comment
Просто случайная мысль, вы пробовали ng-click на элементе вкладки, чтобы запустить вашу функцию? ng-click="tabChanged(tab)"   -  person ODelibalta    schedule 18.09.2015
comment
Выбор просто отлично работает, событие вызывает... моя проблема состоит в том, чтобы заполнить эти комментарии правильным кодом, чтобы фактически включить/отключить обновление графиков   -  person Phate    schedule 18.09.2015
comment
Ах ... Можете ли вы привести пример кода того, как вы делаете диаграмму? Если он назначен переменной в вашей области видимости, angular может отслеживать ее изменения, что приводит к обновлению. Очередная случайная мысль (:   -  person ODelibalta    schedule 18.09.2015
comment
Готово, в любом случае диаграмма автоматически создается с помощью angular-chart (на самом деле это оболочка angularjs для библиотеки Chart.js): моя единственная задача — заполнить переменные, представляющие данные, которые будет отображать график. Проблема связана только с событием автоматического изменения размера, выполняемым библиотекой.   -  person Phate    schedule 18.09.2015
comment
Возможно, этот поток может вам помочь: визуализация"> stackoverflow.com/questions/29395853/   -  person bviale    schedule 21.09.2015

Ответы (1)


arrow_upward
0
arrow_downward

Решено обходным путем: каждый раз, когда пользователь переключается на вкладку, в которой содержатся графики, я вручную запускаю событие окна «изменить размер». Это событие прослушивается библиотекой графиков, которая автоматически изменяет размеры графиков.

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

Не очень элегантно, но сойдет, ожидая обновления библиотеки.

person Phate    schedule 22.09.2015