nvd3 angular指令错误:[$ rootscope:infdig] 10 $ digest()到达迭代次数。中止

时间:2015-04-03 21:34:32

标签: angularjs nvd3.js angularjs-nvd3-directives

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

我使用nvd3 angular指令得到此错误。当您从视图中修改模型时,会发生此错误。但我不认为我这样做。

以下是代码:

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

您的服务似乎可以在此处创建新对象:

ChartConfigService.getChartOptions();

如果是这样......

<强>问题: Afaik将有一个新的观察者在新的对象上导致另一个$ digest周期。我想指令'nvd3'正在对'options'使用双向数据绑定,并试图再次解决它,导致另一个递归调用:

ChartConfigService.getChartOptions();

<强>解决方案: 不要在里面返回一个新的对象:

ChartConfigService.getChartOptions();

- 或 -

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

- 或 -

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