angular.js:10126 错误：达到 [$rootScope:infdig] 10 $digest() 迭代。中止！ nvd3 js出错

Question

我正在尝试使用 nvd3(http://krispo.github.io/angular-nvd3/#/) 绘制折线图。该图位于 ng-repeat 内。

HTML 代码：

在这里，我将一个 obj 从数组传递到 nvd3 图，它能够绘制线图。我尝试将 orderItem.forecast 直接传递给 nvd3 而不是调用该函数。

<div class="parent_div" ng-repeat="orderItem in array">
 <div class="col-md-4 overflow-graph">
  <nvd3 options="options" data="plotGraph(orderItem)" class="with-3d-shadow with-transitions" ng-cloak></nvd3>
 </div>
</div>

控制器代码：

我需要绘制图表的值存储在 orderItem.forecast 中。在 plotGraph() 中，我返回绘制图表的当前 orderItem.forecast。

$scope.options = {
    chart: {
        type: 'lineChart',
        height: 250,
        margin: {
            top: 20,
            right: 20,
            bottom: 40,
            left: 55
        },
        x: function(d) {
            return d.converted_date },
        y: function(d) {
            return d.cases_count },
        xAxis: {
            axisLabel: 'Date',
            tickFormat: function(d) {
                return d3.time.format('%m-%d-%y')(new Date(d));
            }
        },
        yAxis: {
            axisLabel: 'Quantity',
            tickFormat: function(d) {
                return d;
            },
            axisLabelDistance: -10,
        }
    }
};

/*Random Data Generator */
$scope.plotGraph = function(orderItem) {

    //Line chart data should be sent as an array of series objects.
    return [{
        values: orderItem.forecast, //values - represents the array of {x,y} data points
        key: orderItem.plu_code.commodity, //key  - the name of the series.
        color: '#ff7f0e', //color - optional: choose your own line color.
        strokeWidth: 2,
        classed: 'dashed'
    }];
};

绘制图表后，我得到一个错误，这会在几次情况下冻结浏览器，或者浏览器响应缓慢。

angular.js:10126 错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！

谢谢。

Answer 1

您每次都返回一个新数组。 Angular 不会检查数组的内容以确保它是否已更改。

Angular 会检查是否有变化，如果有变化，就会触发 $digest。在你的情况下，因为你总是返回一个新数组，Angular 将继续触发一个新的 $digest 并且有一个故障保险，如果 $digest 循环被连续调用 10 次，它将强制停止并抛出该错误。

在你的情况下，你想创建一个函数来创建你想要的数组，而不是有一个单独的函数来检索创建的数组。

您的问题函数是plotGraph 函数

Answer 2

您能否检查您返回的所有值（在 plotgraph 方法中）不为 null，我猜它在某个地方带来了 null 并且迭代停止了。

再试一次，在 ngrepeat 中尝试添加“orderItem in array track by id”