Ошибка угловой директивы nvd3: [$rootscope:infdig] 10 $digest() достигнуты итерации. отбрасывание

Question

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

Я получаю эту ошибку, используя угловую директиву nvd3. Afaik эта ошибка возникает при изменении моделей из вида. Но я не думаю, что делаю это.

Вот код:

//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();

Если так...

Проблема: 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;
}