Обновление переменной области видимости не работает с функцией области видимости

Я пытаюсь обновить данные своего графика, используя chartJS и его угловую диаграмму-оболочку. При нажатии кнопки данные добавляются на график, с этим проблем нет.

У меня есть другое событие, которое обновляет диаграмму после события прокрутки. Вызов отлично работает и вызывает точно такую ​​же функцию, как и предыдущая. Но мой $scope.valuesData не обновляется. Затем я добавил $scope.$apply() после функции, и она перерисовала всю диаграмму с правильными значениями.

Вопрос:

  1. Почему мой $scope.chartValues ​​не обновляется, когда я вызываю функцию AddData из контроллера (и почему $scope.chartValues ​​обновляется, когда я вызываю функцию из DOM). Вероятно, это проблема привязки данных?

  2. Это функция, которая обновляет только определенную переменную области вместо обновления всей области?

Мой код:

HTML:

<ion-scroll zooming="false" direction="x" delegate-handle="scroller" on-scroll="getScrollPosition()" has-bouncing="true" scroll-event-interval="30000">
  <div class="chart_wrapper" ng-style="{ 'width': myWidth + '%' }"> 
      <canvas  class="chart-bar" chart-data="data2" chart-labels="labels" chart-dataset-override="datasetOverride2" chart-options="options2" ng-click="goToMetrics()" ">
      </canvas>    
 </div>
</ion-scroll>

<button class="button button-small button-calm" ng-click="addValues()">Add Data </button>

JS (контроллер):

  $scope.getScrollPosition = function(){
  var pos =             $ionicScrollDelegate.$getByHandle('scroller').getScrollPosition().left ; 
  if (pos == 0 && $scope.flag == -1){
     $scope.flag = 0;
     //setTimeout($scope.addValues(), 1000);
     $scope.addValues();
  }
  if (pos < 0){
    $scope.flag = -1;
  }
 };


  $scope.addValues = function(){
  console.log('add');
  // Retrieve values
  var week = Graph.getData();
  var pp = $scope.chartData; 
  var mm = $scope.labels;

  // Add values to the chart and update the chart width 
  var tmp = Graph.addBegin(pp, mm,  week);
  $scope.valuesData = tmp.values; 
  $scope.myWidth = $scope.myWidth + tmp.length * 4 ; 
 };

Любая помощь приветствуется


person Jibeee    schedule 09.09.2016    source источник
comment
это может быть не связано, но вы можете использовать службу $timeout, она позволяет лучше отлавливать ошибки.   -  person Patrick Ferreira    schedule 09.09.2016
comment
@PatrickFerreira не имеет отношения, такая же проблема возникает, даже если я не использую функции задержки времени   -  person Jibeee    schedule 09.09.2016


Ответы (1)


  1. Поскольку setTimeout работает вне контекста angular, используйте версию $timeout.
  2. Неа. Вы можете использовать $scope.$digest() для проверки изменений из текущей области, а не всего дерева $scope;
person Valery Kozlov    schedule 09.09.2016
comment
Спасибо за ваш ответ. Я обновил свой вопрос, та же проблема возникает и без использования функций тайм-аута (setTimeout или $timeout). - person Jibeee; 09.09.2016
comment
тот же ответ - прокрутка вызывается вне углового контекста. Вы должны использовать $scope.$apply или $timecount или $digest. Angular не может взаимодействовать с незавернутыми событиями dom - person Valery Kozlov; 09.09.2016
comment
ОК, теперь это работает с $timeout, спасибо!. Не могли бы вы объяснить мне, почему вызовы работают с использованием $timeout? - person Jibeee; 09.09.2016
comment
$timeout(doSmth) примерно эквивалентен setTimeout(function(){$scope.$apply(doSmth)}); Ваши данные в угловой синхронизации через двусторонние привязки. На самом деле ваш вызов работает, но связанные части углового приложения не синхронизируются с новыми значениями. $scope.$apply просто синхронизирует и распространяет изменения по всему приложению. - person Valery Kozlov; 09.09.2016