nvd3角度指令错误:已达到[$rootscope:infdig]10$digest()迭代.中止

Question

nvd3 angular error: [$rootscope:infdig] 10 $digest() iterations reached. aborting!

我使用nvd3角度指令得到这个错误。在视图中修改模型时，可能会发生此错误。但我不认为我在这么做。

这是代码：

//controller
var options = getChartOptions();
var data = getChartData();
$scope.chart = {
    data: data,
    options: options
};
//view
<nvd3 class="metrics-chart" options="chart.options" data="chart.data"></nvd3>

这是完整的控制器：

var options = getChartOptions();
var data = getChartData();
$scope.chart = {
    data: data,
    options: options
};
function getChartOptions(){
    return ChartConfigService.getChartOptions();
}

function getChartData(){
    var data = [];
    var colors = {
        'GET': '#f00',
        'POST': '#0f0',
        'PUT': '#00f',
        'DELETE': '#ff0'
    };
    var verbs = ['GET', 'POST', 'PUT', 'DELETE'];
    verbs.forEach(function(verb){
        var i = 0;
        var values = [];
        var now = moment();
        while ( i < 10 ) {
            values.push({
                x: moment(now).add(i, 'minutes'),
                y: Math.round(Math.random() * 10)
            });
            i++;
        }
        data.push({
            values: values,      //values - represents the array of {x,y} data points
            key: verb, //key  - the name of the series.
            color: colors[verb]  //color - optional: choose your own line color.
        });
    });
    return data;
}

Answer 1

发生此错误的原因是选项中的某些未指定属性在默认情况下分配不正确，并且不断变化。就我而言，这是高度。当我在选项中指定它时，错误已经消失了

Answer 2

您的服务看起来可以在此处创建一个新对象：

ChartConfigService.getChartOptions();

如果是…

问题：在这个新的Object上会有一个新的观察者，导致另一个$digest循环。我猜指令"nvd3"在"options"上使用双向数据绑定，并试图再次解决它，导致对的另一个递归调用

ChartConfigService.getChartOptions();

解决方案：不要在内部返回新对象：

ChartConfigService.getChartOptions();

--或--

// var options = getChartOptions();
// function getChartOptions(){ ... }
var options = ChartConfigService.getChartOptions();

--或--

var optionsData = ChartConfigService.getChartOptions();
function getChartOptions(){
    return optionsData;
}