angular.js:10126 Ошибка: [$rootScope:infdig] достигнуто 10 итераций $digest(). Прерывание! ошибка с nvd3 js

Я пытаюсь построить линейный график, используя 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(). Прерывание!

Спасибо.


javascript angularjs angular-nvd3
person Gautam R    schedule 22.03.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы возвращаете новый массив каждый раз. Angular не проверяет содержимое массива, чтобы убедиться, что оно изменилось или нет.

Angular проверит, изменилось ли что-то, и если что-то изменилось, будет запущен $digest. В вашем случае, поскольку вы ВСЕГДА возвращаете новый массив, Angular будет продолжать запускать новый $digest, и есть отказоустойчивость, если цикл $digest вызывается 10 раз подряд, он принудительно остановится и выдаст эту ошибку.

В вашем случае вы хотите создать функцию, которая создает нужный вам массив, а затем иметь отдельную функцию, которая извлекает созданный массив.

Проблемной функцией в вашем случае является функция plotGraph

person Giovani Vercauteren    schedule 22.03.2017
comment
Сделал как вы сказали! Работает как шарм! Ваше здоровье! - person Gautam R; 22.03.2017

arrow_upward
-1
arrow_downward

Не могли бы вы проверить, что все значения в вашем возврате (в методе plotgraph) не равны нулю, я думаю, где-то это приводит к нулю, и итерация останавливается.

Попробуйте еще одно исправление, в ngrepeat попробуйте добавить «orderItem в отслеживание массива по идентификатору»

person Sujatha    schedule 22.03.2017
comment
Нет, в ответе/возврате нет нулевых значений. Я попробовал второе исправление, а не повезло. Спасибо! - person Gautam R; 22.03.2017