为什么onChange回调中$ scope.data的更改不会重新绘制chart.js？

Question

我有一个围绕MEAN Web堆栈编写的应用程序.我创建了一个API,根据URL,返回给定权重的JSON数据集.这与我的Mongo数据库互连.有两种返回的JSON类型,一种适用于所有权重,另一种适用于两种日期之间的权重.我不仅在第一个实例中显示所有这些权重(主页/索引),而且还通过独立页面上的筛选集(按日期)显示.这个独立页面使用angular-chart.js和ngDaterangepicker.这些都是注入我的代码的Angular指令.

选择日期范围时,ng-change函数runs(change())会抓取一组新的过滤数据(按日​​期).然后将该数据添加回$scope.data属性,该属性在更改时理论上应该导致图表重新绘制.不幸的是,我的应用程序并没有在on-change函数内观察这个属性的新变化.

如果在此函数之外设置超时,则图形将重新绘制.所以我想知道是否有更好的方法或不同的方法来解决这个问题.

根据文档,angular-chart如果$scope.data图表的值有任何变化将重新绘制新值,但是在更改事件监听器/函数内部的任何内容都将导致任何新值设置$scope.data为不绑定并导致图形不要重新绘制新值.为什么ng-change指令如此特别？下面是我的HTML和JavaScript.

=== HTML视图===

<div class="container-fluid">
<h1 class="text-center">Graphs</h1>
    <div class="container">
<div class="col-sm-12" ng-controller="weights">
    <input type="text" ng-change="change()" ng-model="model"/>
        <input type="daterange" ng-change="change({{myDateRange | json}})" ng-model="myDateRange" />
        {{myDateRange | json}}
        {{data}}
</div>
    <div class="col-sm-12">
    <div class="col-sm-2"></div>
    <div class="col-sm-8 center-block">
        <div ng-controller="weights">
    <canvas id="line" class="chart chart-line" chart-data="data"
  chart-labels="labels" chart-legend="true" chart-series="series"
  chart-click="onClick">
</canvas> 
</div>
</div>
<div class="col-sm-2"></div>
</div>
    </div>
</div>

===角度控制器===

angular.module('app').controller('weights', ['$scope', 'weightsFactory','$filter','$http', '$timeout', function($scope, weightsFactory, $filter, $http, $timeout){
    //need to get weights from /weights
    //$scope.labels = [1, 2, 3, 4]; 
    $scope.series = ['Weights Over Time'];
    $http.get('/weights').success(function(data){ //all data
    var dates = []; 
    var weights = []; 
    $scope.weights = data; 
     angular.forEach(data, function(value, key){
        dates.push($filter('date')(value.date, 'MMM dd, yyyy - hh:m:ss a'));
        weights.push(value.weight);
     });    
    $scope.labels = dates; 
    $scope.data = [ weights ];
    });

$scope.change = function(data){
     //2016-04-08T04:00:00.000Z/2016-04-09T03:59:59.999Z
     var startTime = '2016-04-08T04:00:00.000Z'; 
     var endTime = '2016-04-09T03:59:59.999Z';
     $http.get('/weight/range/'+startTime+'/'+endTime).success(function(response){
        $timeout(function() {
            $scope.data = [['100', '200', '300']]; //this data is being set but is not causing a change on chart.js
        }, 10);
     });        
}

Answer 1

我在这个问题上浪费了 50 多个赏金，但是可以安全地假设您可以在应用程序中拥有相同的控制器，但是如果您将两个控制器嵌套在一起，那么应用程序将可以工作，但是您本质上将拥有两个不同的 $scope 变量在记忆中。我不会删除我的错误只是为了证明如果其他方法都失败，请寻找相同的控制器。请小心您的 HTML。