来自过滤器AngularJS无限$digest循环的$digest更新图

Question

我想在每次更改选项时更新一个图表(使用角-nvd3 3制作)：

以下是我的选择：

​

​

(在代码中，如下所示：

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

首先，我试图创建一个过滤器，但是我的过滤器必须访问作用域值(查看选中了哪些选项)，所以我不得不在过滤器中使用"this“。问题是，当更新图形时，它会改变模型并重新获取过滤器:它会形成一个无限循环。

所以我决定做一个伪滤波器，在控制器中有一个函数。

这是我的功能：

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

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

然后，对于图，我使用了可怕的库角-nvd3 3：

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

或者只是generatedData()，因为它不必在$scope上