Le comportement de la cession d'expression invoquée par ng-cliquez à l'intérieur de ng-repeat

Je suis tenté de mettre à jour mon modèle à l'aide de ng-click attaché à un <p>.

Je n'ai pas de problème avec une expression d'affectation à l'extérieur d'un ng-repeat, ou avec l'appel de la portée de la méthode à l'intérieur de la ng-repeat. Cependant, si j'utilise une cession à l'intérieur de la ng-repeat, il semble être ignorée. Je ne vois pas tous les messages signalés dans le Firefox de la console, mais je n'ai pas essayé de définir des points d'arrêt pour voir si l'événement est déclenché.

<!DOCTYPE html>
<html>
<head>
    <title>Test of ng-click</title>
    <script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script>
    <script type='text/javascript'>//<![CDATA[ 

        function MyCtrl($scope) {
            $scope.selected = "";
            $scope.defaultValue = "test";
            $scope.values = ["foo", "bar", "baz"];

            $scope.doSelect = function(val) {
                $scope.selected = val;
            }
        }
        //]]>  

    </script>
</head>

<body ng-app>
    <div ng-controller='MyCtrl'>
        <p>Selected = {{selected}}</p>
        <hr/>
        <p ng-click='selected = defaultValue'>Click me</p>
        <hr/>
        <p ng-repeat='value in values' ng-click='selected = value'>{{value}}</p>
        <hr/>
        <p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>
    </div>
</body>
</html>

Violon est ici, si vous préférez (avec un couple de plus tôt variantes).

InformationsquelleAutor kdgregory | 2013-03-13
  1. 78

    Directive ngRepeat crée un nouveau champ d'application pour chaque itération, de sorte que vous besoin de faire référence à des variables dans la portée parent.

    Utilisation $parent.selected = value, comme dans:

    <p ng-repeat='value in values' ng-click='$parent.selected = value'>{{value}}</p>

    Remarque: appel d'une Fonction se propage en raison de prototypes à l'héritage.

    Si vous voulez en savoir plus: Les Nuances de Portée Prototypes Héritage.

    • Oh pinaise! Je savais que cela devait être quelque chose de simple.
    • +1. Bien que $parent au travail, à l'aide d'un objet pour votre modèle est l'approche recommandée (voir ma réponse pour plus de détails).
    InformationsquelleAutor Stewie
  2. 21

    Comme @Stewie mentionné, $parent est une façon de résoudre ce problème. Cependant, le recommandé (par l'Angulaire de l'équipe) la solution est de ne pas définir des primitives propriétés sur le $scope. Plutôt, l' $champ d'application devrait référence de votre modèle. À l'aide de références permet également d'éviter le problème (parce que les peuples primitifs propriétés ne seront pas créés sur l'enfant étendues qui/masquer l'ombre de la portée parent propriétés du même nom), et vous n'avez pas à se rappeler lors de l'utilisation de $parent:

    HTML:

    <p>Selected = {{model.selected}}</p>
<hr/>
<p ng-click='model.selected = defaultValue'>Click me</p>
<hr/>
<p ng-repeat='value in values' ng-click='model.selected = value'>{{value}}</p>
<hr/>
<p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>

    JavaScript:

    $scope.model = { selected: ""};
...
$scope.doSelect = function (val) {
   $scope.model.selected = val;
}

    Violon.

    J'ai récemment mis à jour la page du wiki que @Stewie mentionné recommandons toujours de cette approche.

    • +1 d'Accord. À l'aide de $parent semble toujours un peu hackish, même si le résultat final est le même. Je n'ai même pas l'utiliser. Suppose que j'étais juste un peu la flemme aujourd'hui pour expliquer le '.'. Aussi, +1 pour la mise à jour du wiki.
    • Faut dire que je considère la création d'un "modèle" de l'objet de plus d'un hack. Et plus susceptibles de conduire à des erreurs dans une page complexe (à partir de fautes d'orthographe, si rien d'autre). Personnellement, je pense que les fonctions sont la meilleure solution pour modéliser les mises à jour (et aussi pour les expressions dans ng-show et autres).
    • le but de l' $portée est de consulter pour le modèle, pas de est le modèle" (à partir de l'angle de vidéo de l'équipe mentionnée par Marque). Vous pouvez utiliser n'importe quel objet javascript que vous voulez comme un modèle, puis le lier à partir de votre portée.
    • Je suis plus que trois ans à la fin de cette partie, mais je sens que la distinction entre la portée et le modèle est très belle à garder. Pour une utilisation très simple des cas, vous pouvez utiliser le champ que le modèle, mais dans le monde réel des applications, de les avoir clairement séparés est vraiment utile.
    InformationsquelleAutor Mark Rajcok