Question

每次更改某些选项时，我想更新图表（使用angular-nvd3制作）：

这是我的选择：

enter image description here

（在代码中，它看起来像这样：

<input type="radio" ng-model="mode" value="actions"><strong ng-show="actions.length !== 0"> Actions :</strong><br />
<span class="retrait" ng-repeat = "action in actions">
<input type="checkbox" ng-model="actions[$index].value" ng-disabled="mode != 'actions'"> {{action.statut}}<br />
</span><br />

<input type="radio" ng-model="mode" value="jalons"><strong ng-show="jalons.length !== 0"> Jalons :</strong><br />
<span class="retrait" ng-repeat = "jalon in jalons">
<input type="checkbox" ng-model="jalons[$index].value" ng-disabled="mode != 'jalons'"> {{jalon.statut}}<br />
</span><br />

首先，我尝试制作一个过滤器，但我的过滤器必须访问范围值（看看检查了哪些选项），所以我不得不使用＆＃34;这个＆＃34;进入过滤器。问题在于，在更新图形时，它会更改模型并重新启动过滤器：它会产生无限循环。

所以我决定使用控制器中的函数制作一个伪过滤器。

这是我的功能：

$scope.generateData = function() {


var liste = [];
var i, j, k, n, p, dataStock;

dataStock = [
    {"key":{'jalons':'Non atteint', 'actions':'Non fait', 'phases':'Non fait'}[$scope.mode],"values":[]},
    {"key":{'jalons':'Atteint', 'actions':'En cours', 'phases':'En cours'}[$scope.mode],"values":[]},
    {"key":{'jalons':'Validé', 'actions':'Fait', 'phases':'Fait'}[$scope.mode],"values":[]}
];

var stock_retards_ouverture = [];
var stock_retards_fermeture = [];

var flux_retards_ouverture = [];
var flux_retards_fermeture = [];

var stock_non_faite = [];
var stock_faite = [];
var stock_en_cours = [];

var flux_non_faite = [];
var flux_faite = [];
var flux_en_cours = [];

var num_serie = parseInt($scope.serie.substring($scope.serie.length-1, $scope.serie.length), 10);
i=1;
while(i<=num_serie) {

    stock_retards_ouverture.push(0);
    stock_retards_fermeture.push(0);

    flux_retards_ouverture.push(0);
    flux_retards_fermeture.push(0);

    stock_non_faite.push(0); // pour les jalons, c'est le statut non atteint
    stock_faite.push(0); // pour les jalons, validé
    stock_en_cours.push(0); // pour les jalons, atteint

    flux_non_faite.push(0);
    flux_faite.push(0);
    flux_en_cours.push(0);

    i+=1;
}


    for(i = 0; i<$scope.raw_data.length; i++) {
        var element = $scope.raw_data[i];
        var type = element.type;
        var root = element.root;

        var statut = element[$scope.serie].statut;

        // pour les phases
        if($scope.mode === 'phases') {
            if(type == $scope.sauvegarde.taches_types.phase) {


            for(j = 0; j< $scope.phases.length; j++) {
                if($scope.phases[j].statut == statut && $scope.phases[j].value === true) {

                    for(k = 0; k<$scope.affichage.length;k++){
                        if(root == $scope.affichage[k].projet && $scope.affichage[k].value === true){
                            liste.push(element);

                            // pour chaque série
                            for(p=1;p<=num_serie;p++) {
                                if(element['serie'+p].statut === $scope.sauvegarde.taches_statuts.phase_en_cours) {
                                    stock_en_cours[p-1] += 1;
                                }
                                if(element['serie'+p].statut === $scope.sauvegarde.taches_statuts.phase_faite) {
                                    stock_faite[p-1] += 1;
                                }
                                if(element['serie'+p].statut === $scope.sauvegarde.taches_statuts.phase_non_faite) {
                                    stock_non_faite[p-1] += 1;
                                }
                            }

                        }
                    }

                }
            }


        }
        }

        // pour les actions
        if($scope.mode === 'actions') {
            if(type == $scope.sauvegarde.taches_types.action) {

            for(j = 0; j< $scope.actions.length; j++) {
                if($scope.actions[j].statut == statut && $scope.actions[j].value === true) {

                    for(k = 0; k<$scope.affichage.length;k++){
                        if(root == $scope.affichage[k].projet && $scope.affichage[k].value === true){
                            liste.push(element);

                            // pour chaque série
                            for(p=1;p<=num_serie;p++) {
                                if(element['serie'+p].statut === $scope.sauvegarde.taches_statuts.action_en_cours) {
                                    stock_en_cours[p-1] += 1;
                                }
                                if(element['serie'+p].statut === $scope.sauvegarde.taches_statuts.action_faite) {
                                    stock_faite[p-1] += 1;
                                }
                                if(element['serie'+p].statut === $scope.sauvegarde.taches_statuts.action_non_faite) {
                                    stock_non_faite[p-1] += 1;
                                }
                            }

                        }
                    }

                }
            }

        }
        }

        // pour les jalons
        if($scope.mode === 'jalons') {
            if(type == $scope.sauvegarde.taches_types.jalon) {

            for(j = 0; j< $scope.jalons.length; j++) {
                if($scope.jalons[j].statut == statut && $scope.jalons[j].value === true) {

                    for(k = 0; k<$scope.affichage.length;k++){
                        if(root == $scope.affichage[k].projet && $scope.affichage[k].value === true){
                            liste.push(element);


                            // pour chaque série
                            for(p=1;p<=num_serie;p++) {
                                if(element['serie'+p].statut === $scope.sauvegarde.taches_statuts.jalon_atteint) {
                                    stock_en_cours[p-1] += 1;
                                }
                                if(element['serie'+p].statut === $scope.sauvegarde.taches_statuts.jalon_valide) {
                                    stock_faite[p-1] += 1;
                                }
                                if(element['serie'+p].statut === $scope.sauvegarde.taches_statuts.jalon_non_atteint) {
                                    stock_non_faite[p-1] += 1;
                                }
                            }

                        }
                    }

                }
            }

        }
        }
    }

    $scope.stock_retards_ouverture = stock_retards_ouverture;
    $scope.stock_retards_fermeture = stock_retards_fermeture;

    $scope.flux_retards_ouverture = flux_retards_ouverture;
    $scope.flux_retards_fermeture = flux_retards_fermeture;

    $scope.stock_non_faite = stock_non_faite;
    $scope.stock_faite = stock_faite;
    $scope.stock_en_cours = stock_en_cours;

    $scope.flux_non_faite = flux_non_faite;
    $scope.flux_faite= flux_faite;
    $scope.flux_en_cours = flux_en_cours;


    for(i=0;i<num_serie;i++) {
        var lastElem1 = {};
        var lastElem2 = {};
        var lastElem3 = {};


        if(dataStock[0].values.length === 0) {
            lastElem1.y1 = 0;
            lastElem2.y1 = 0;
            lastElem3.y1 = 0;
        } else {
            lastElem1 = dataStock[0].values[dataStock[0].values.length - 1];
            lastElem2 = dataStock[1].values[dataStock[1].values.length - 1];
            lastElem3 = dataStock[2].values[dataStock[2].values.length - 1];
        }

        var elem0 = {
            x: "serie"+(i+1),
            y: stock_faite[i],
            y0: lastElem1.y1,
            series: i,
            size: stock_faite[i],
            y1: lastElem1.y1 + stock_faite[i]
        };

        var elem1 = {
            x: "serie"+(i+1),
            y: stock_en_cours[i],
            y0: lastElem2.y1,
            series: i,
            size: stock_en_cours[i],
            y1: lastElem2.y1 + stock_en_cours[i]
        };

        var elem2 = {
            x: "serie"+(i+1),
            y: stock_non_faite[i],
            y0: lastElem3.y1,
            series: i,
            size: stock_non_faite[i],
            y1: lastElem3.y1 + stock_non_faite[i]
        };

        dataStock[0].values.push(elem0);
        dataStock[1].values.push(elem1);
        dataStock[2].values.push(elem2);

    }



return dataStock;
};

它生成适当的数据，可用于创建图形。

然后，对于图表，我使用了很棒的库Angular-nvd3：

<div class="graphCtrl" id="graph1">
  <h3 class="graphTitle">Suivi des actions (Stock)</h3>
  <nvd3 options="options" data="generateData()"></nvd3>
</div>

从我的函数中获取数据的地方。

但我不知道为什么，我仍然有$digest的无限循环，因为我仍然可以看到问题：

错误：[$ rootScope：infdig]

你知道它可能来自哪里吗？

Answer 1

我认为问题出在这里

<div class="graphCtrl" id="graph1">
  <h3 class="graphTitle">Suivi des actions (Stock)</h3>
  <nvd3 options="options" data="generateData()"></nvd3>
</div>

你知道，每次$digest进程运行时，函数都会被执行，这个函数会改变触发$digest的模型等等，这是你的无限循环，最好做的就是分配生成的数据变量然后在html中使用

<div class="graphCtrl" id="graph1">
  <h3 class="graphTitle">Suivi des actions (Stock)</h3>
  <nvd3 options="options" data="myGeneratedData"></nvd3>
</div>

JS

$scope.myGeneratedData = $scope.generateData()

或者只是generateData（），因为它不必在$ scope

上

来自过滤器的AngularJS更新图表 - ＆gt;无限$ digest循环

1 个答案:

JS