$index de ngRepeat à l'intérieur angularjs directive
j'essaie de trouver la meilleure façon 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 du ngRepeat, j'aimerais avoir l'option de savoir où je suis dans l'itération afin que je puisse créer un modèle personnalisé basé sur cette position d'index.
a moins qu'il N'y ait une meilleure façon de faire cela, j'essaie de faire cette fonctionnalité basée sur cette documentation des directives:
& ou &attr-fournit une façon d'exécuter une expression dans le contexte du champ parent. Si aucun attribut nom est spécifié, le nom de l'attribut est supposé être le même que le nom local. Donné et la définition de widget de la portée: { localFn:' & myAttr'}, puis isoler la propriété de la portée localFn pointera vers une fonction wrapper pour l'expression count = count + value. Souvent il est souhaitable de passer des données du champ isolé via une expression et au champ parent, cela peut être fait en passant une carte de noms et valeurs des variables dans l'expression wrapper fn. Par exemple, si l'expression est increment(amount), alors nous pouvons spécifier la valeur amount en appelant le localFn comme localFn({amount: 22}).
http://docs.angularjs.org/guide/directive
j'ai du mal à comprendre exactement ce que cette déclaration me dit. Alors, ce que j'ai essayé de faire, c'est ça...
D'abord la directive ngRepeat étant utilisée avec ma la directive "testTemplate":
<ul>
<li my-attr="test()" my-directive ng-repeat="value in values" class="span2">
</li>
</ul>
Ensuite, mon directive définie:
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é du tout. Peut-être que je ne comprends pas comment la fonction de test dans le contrôleur parent devrait être appelée. Maintenant, je ne suis pas vraiment en augmentant encore, mais qui est au-dessus de la voie correcte, je voudrais aller sur l'augmentation de mon compte, quand j'arrive à ce point, si je peux obtenir la fonction de test de feu?
2 réponses
au Lieu de scope.$parent.$index vous pourriez considérer passer $index comme un attribut de directive:
<li my-directive index="{{$index}}" ng-repeat="value in values">
la Directive
myApp.directive('myDirective', function() {
return {
replace: true,
// transclude: true,
scope: {
index: '@'
},
template: '<div>testing {{index}}</div>',
link: function(scope, element, attrs) {
// ...
}
}
});
comme vous l'avez souligné, vous pouvez saisir l'index en utilisant $ index.
comme Pourquoi votre fonction de test ne fonctionne 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);