web-dev-qa-db-fra.com

$ index of ng Repeat inside angularjs directive

J'essaie de trouver le meilleur moyen d'obtenir une position d'index dans un ngRepeat utilisé avec une directive personnalisée. Le problème que j'essaie de résoudre est que pour chaque itération de ngRepeat, j'aimerais avoir la possibilité de savoir où je suis dans l'itération afin de pouvoir créer un modèle personnalisé basé sur cette position d'index.

À moins qu'il n'y ait une meilleure façon de le faire, j'essaie de faire cette fonctionnalité sur la base de cette documentation à partir des directives:

& ou & attr - fournit un moyen d'exécuter une expression dans le contexte de la portée parent. Si aucun nom attr n'est spécifié, le nom d'attribut est supposé être le même que le nom local. Étant donné et la définition du widget de portée: {localFn: '& myAttr'}, puis isoler la propriété de portée localFn pointera vers un wrapper de fonction pour l'expression count = count + value. Il est souvent souhaitable de transmettre des données de la portée isolée via une expression et à la portée parent, cela peut être fait en passant une carte de noms et de valeurs de variables locales dans le wrapper d'expression fn. Par exemple, si l'expression est incrément (montant), nous pouvons spécifier la valeur du montant en appelant le localFn en tant que localFn ({montant: 22}).

http://docs.angularjs.org/guide/directive

J'ai de la difficulté à comprendre exactement ce que cette déclaration me dit. Donc, ce que j'ai essayé de faire, c'est ceci ...

D'abord la directive ngRepeat utilisée avec ma directive dans "testTemplate":

<ul>
   <li my-attr="test()" my-directive ng-repeat="value in values" class="span2">
   </li>
</ul>

Ensuite, ma directive a défini:

angular.module('myModule', [])
       .directive('myDirective', function() {
            return {
                replace : true,
                transclude : true,
                scope : {
                    test: '&myAttr'
                },
                templateUrl: 'partials/myTemplate.html',
                link : function(scope, element, attrs) {
                    alert(scope.count);
                }
            }
        });

Enfin, j'essaie de définir la fonction "test" dans le contrôleur pour le modèle parent où la directive est référencée.

function TestTemplateCtrl($scope, testTemplate) {
    $scope.test = function() {
        alert('in test');
        $scope.count = "1";
    }
}

Donc le premier problème est que ma fonction "test" dans le parent n'est pas exécutée du tout. Peut-être que je ne comprends pas comment la fonction de test dans le contrôleur parent doit être appelée. Maintenant, je n'augmente pas encore non plus, mais ce qui précède est-il la bonne façon d'augmenter mon nombre lorsque j'arrive à ce point si je peux faire fonctionner la fonction de test?

angularjsng-repeat
35
DavidB

Au lieu de scope.$parent.$index vous pourriez envisager de passer $ index comme attribut de directive:

<li my-directive index="{{$index}}" ng-repeat="value in values">

Directif:

myApp.directive('myDirective', function() {
    return {
        replace: true,
        // transclude: true,
        scope: {
            index: '@'
        },
        template: '<div>testing {{index}}</div>',
        link: function(scope, element, attrs) {
            // ...
        }
    }
});

Violon .

50
Mark Rajcok

Comme vous l'avez souligné, vous pouvez récupérer l'index en utilisant $ index.

Comme pourquoi votre fonction de test ne se déclenche pas, vous ne l'avez pas exécutée. Dans la fonction de lien de votre directive, vous avez besoin de quelque chose comme:

scope.$eval(attrs.myAttr);
2
asgoth