angular.js:10126 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! error with nvd3 js

Question

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

HTML代码：

在这里，我将一个对象从数组传递到 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

能否请您检查 return 中的所有值（在 plotgraph 方法中）不为空，我猜某处它带来了空并且迭代停止了。

再试一次修复，在 ngrepeat 中尝试添加 "orderItem in array track by id"

angular.js:10126 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! error with nvd3 js

angular.js:10126 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! error with nvd3 js

javascript

angularjs

angular-nvd3