2015-09-18 2 views
0

В моем приложении у меня есть две вкладки, давайте просто называть их А и Б.bootstrap ui + угловая диаграмма: можно ли отключить автоматическое обновление графика?

Графики в закладке А. Вот простой код:

<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 

    } 
}; 

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

+0

Просто случайная мысль, вы пробовали 'ng-click' на элементе табуляции, чтобы запустить вашу функцию? 'ng-click =" tabChanged (tab) "' – ODelibalta

+0

Выбор просто отлично работает, триггеры событий ... моя проблема состоит в том, чтобы заполнить эти комментарии правильным кодом, чтобы на самом деле включить/отключить обновление графиков. – Phate

+0

А ... Можете ли вы поставить образец кода того, как вы делаете диаграмму? Если она назначена переменной в вашей области, угловой может наблюдать за изменениями, что вызывает обновление. Еще одна случайная мысль (: – ODelibalta

ответ

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

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

Смежные вопросы