刷新范围变量不适用于范围函数

时间:2016-09-09 13:00:09

标签: angularjs ionic-framework scope chart.js angular-chart

我正在尝试使用chartJS及其包装角度图表更新我的图表数据。单击一个按钮时,它会在图表上添加数据,没问题。

我有另一个事件,它在滚动事件后更新图表。该呼叫效果很好,它调用与以前完全相同的功能。但是我的$ scope.valuesData没有更新。然后我在函数后添加了$scope.$apply(),并使用正确的值重绘整个图表。

问题是:

  1. 当我从控制器调用函数AddData时,为什么我的$ scope.chartValues没有更新(为什么当我从DOM调用函数时$ scope.chartValues被更新)。这可能是一个数据绑定问题?

  2. 这是一个只更新特定范围变量而不是刷新整个范围的函数吗?

  3. 我的代码:

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

    任何帮助表示赞赏

1 个答案:

答案 0 :(得分:1)

  1. 因为setTimeout在角度上下文之外运行,所以请使用$ timeout version。
  2. 不。您可以使用$ scope。$ digest()来检查当前范围的更改,而不是所有$ scope树;