Refreshing scope variable not working with scope function

Question

I'm trying to update data of my chart using chartJS and its wrapper angular-chart. When a button is clicked, it adds data on the chart, no problem with this.

I have another event, which update the chart after a scroll event. The call works great, and it calls exactly the same function as previous. But my $scope.valuesData isn't updated . Then I added a $scope.$apply() after the function, and it redraws the whole chart with the right values.

Question are :

Why does my $scope.chartValues is not updated when I call the function AddData from the controller (and why is $scope.chartValues is updated when I call the function from the DOM). It is probably a data-binding issue ?
Is it a function that update only a specific scope variable, instead of refreshing the whole scope ?

My code :

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 (controller) :

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

Any help appreciated

it maybe not related, but you can use the $timeout service, it allows some better catching for errors. — Patrick Ferreira
– Patrick Ferreira, Commented Sep 9, 2016 at 13:06
@PatrickFerreira not related, same issue happens even if I don't use time delay functions — Jibeee
– Jibeee, Commented Sep 9, 2016 at 13:17

Valery Kozlov · Accepted Answer · 2016-09-09 13:21:28Z

1

Because setTimeout runs outside angular context, use $timeout version.
Nope. You can use $scope.$digest(), to check changes from current scope, not all $scope tree;

answered Sep 9, 2016 at 13:21

Valery Kozlov

1,5772 gold badges11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jibeee Over a year ago

Thank you for your answer. I updated my question, the same problem happens too without using timeout functions (setTimeout or $timeout).

Valery Kozlov Over a year ago

same answer - on-scroll called outside angular context. You should you $scope.$apply or $timeount or $digest. Angular can't interop with not wrapped dom events

Jibeee Over a year ago

OK this works now with $timeout thanks!. Could you provides me explanations on why the calls works using $timeout ?

Valery Kozlov Over a year ago

$timeout(doSmth) roughly is equivalent to setTimeout(function(){$scope.$apply(doSmth)}); Your data in angular sync via two-way bindings. Actually your call works, but related parts of angular app does not synced with new values. $scope.$apply just sync and propagate changes around whole app.

Collectives™ on Stack Overflow

Refreshing scope variable not working with scope function

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related