ngRepeat exécuté plusieurs fois

Version imprimable

Bonjour,

Je suis tombé par hasard sur une bizarrerie dans angularjs. J'ai un ngRepeat qui semble s'exécuter plusieurs fois.

ma page html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=yes" />
        <title>mon site</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body ng-app="app" ng-controller="GeneralCtrl">
        <header>
            <nav>
                <ul>
                    <li ng-repeat="menu in menus" ng-class=testHeader($index)>
                        <button type="button" class="btn">
                            <span class="{{menu.classImage}} img"></span>&nbsp;<span class="">{{menu.texte}}</span>
                        </button>
                    </li>
                </ul>
            </nav>
        </header>
        <!-- Angular -->
        <script src="lib/angular/angular.min.js"></script>
        <!-- Application -->
        <script src="js/app.js"></script>
    </body>
</html>

mon js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
'use strict';
var app = angular.module('app', []);
/*
 * Routes configuration
 */
app
.controller('GeneralCtrl', function($scope) {
    $scope.menus = [
        {
        "classImage": "img1",
            "texte": "1",
        },
        {
            "classImage": "img2",
            "texte": "2",
        },
        {
            "classImage": "img3",
            "texte": "3",
        }
    ];
    $scope.testHeader = function(index) {
        console.log("index " + index);
    };
});

J'ai fait une page très simple pour chercher le problème.

J'ai bien un seul menu dans ma page, mais le résultat dans la console me donne:

index 0
index 1
index 2
index 0
index 1
index 2
index 0
index 1
index 2

Donc 3 répétitions.

Merci pour votre aide.

03/04/2014, 17h58
beekeep

Bonjour,

et avec cinq menus il y a cinq répétitions ?

Je pense que le fait de passer dans une fonction de ton scope provoque un apply du contexte et donc relance le repeat sur l'élément du contexte.
Il faudrait essayer en utilisant une directive à la place de la fonction dans le scope.
04/04/2014, 08h34
ras92

Merci pour la réponse. Avec 4 éléments, il y a toujours 3 répétitions.
La fonction est bien utilisé pour déterminer la classe à mettre. Dans mon exemple, c'est un console log pour montrer le problème.
Mettre une fonction dans un ngClass est tout à fait normal. Faire une directive pour ça serait inutile.
04/04/2014, 16h54
devyreham

Je ne pense pas qu'il l'exécute 3 fois le ngRepeat. C'est plutot testHeader qui est evalué 3 fois. Surement parce qu'il y a plusieurs niveaux de compilation (la page, ngRepeat et ngClass).
Oui y a des bizarrerie avec Angular car tu peux passer des fonctions dans les directives. Et ces fonctions peuvent correspondent à rien, la compilation va les evaluer.

ngClass expression
Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

La directive s'attend à ng-class="{maclasse: true, monautreclasse: false}"

en général il vaut mieux passer des Expressions lorsque c'est demandé.
07/04/2014, 10h05
ras92

Résolu:

Aucune solution !