ID de modèle de directive pour les éléments

J’ai une directive qui peut être utilisée plusieurs fois sur une page. Dans le modèle de cette directive, je dois utiliser des identifiants pour un élément d’entrée afin de pouvoir “lier” une étiquette comme ceci:

 

Maintenant, le problème est que, dès que ma directive est incluse plusieurs fois, l’ID “item1” n’est plus unique et l’étiquette ne fonctionne pas correctement (il faut cocher / décocher la case en cliquant dessus).

Comment ce problème est-il résolu? Existe-t-il un moyen d’atsortingbuer un “espace de noms” ou un “préfixe” au modèle (comme asp.net avec le préfixe ctl00 …)? Ou dois-je inclure une expression angular dans chaque atsortingbut id qui consiste en un ID de directive provenant de Scope + un identifiant statique. Quelque chose comme:

  

Modifier:

Ma directive

 module.directive('myDirective', function () { return { ressortingct: 'E', scope: true, templateUrl: 'partials/_myDirective.html', controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) { ... } //controller }; }]); 

Mon HTML

 

HTML

  

METTRE À JOUR

Angular 1.3 a introduit une liaison unique paresseuse native. à partir de la documentation de l’expression angular :

Liaison unique

Une expression qui commence par :: est considérée comme une expression unique. Les expressions uniques cesseront d’être recalculées une fois qu’elles seront stables, ce qui se produit après le premier condensé si le résultat de l’expression est une valeur non définie (voir ci-dessous).

Solution native :

 .directive('myDirective', function() { var uniqueId = 1; return { ressortingct: 'E', scope: true, template: '' + '', link: function(scope, elem, attrs) { scope.uniqueId = 'item' + uniqueId++; } } }) 

Ne liez qu’une seule fois:

  • Si vous ne devez lier une valeur que lorsque vous ne devez pas utiliser de liaisons ({{}} / ng-bind)
  • les liaisons sont chères car elles utilisent $ watch. Dans votre exemple, sur chaque $ digest, angular dirty vérifie les changements de vos identifiants, mais vous ne les définissez qu’une seule fois.
  • Consultez ce module: https://github.com/Pasvaz/bindonce

Solution:

 .directive('myDirective', function() { var uniqueId = 1; return { ressortingct: 'E', scope: true, template: '', link: function(scope, elem, attrs) { var item = 'item' + uniqueId++; elem.find('input').attr('id' , item); elem.find('label').attr('for', item); } } }) 

Nous ajoutons un paramètre BlockId à la scope, car nous utilisons l’id dans nos tests Selenium par exemple. Il y a toujours une chance qu’ils ne soient pas uniques, mais nous préférons les contrôler complètement. Un autre avantage est que nous pouvons donner à l’article un identifiant plus descriptif.

Directive JS

 module.directive('myDirective', function () { return { ressortingct: 'E', scope: { blockId: '@' }, templateUrl: 'partials/_myDirective.html', controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) { ... } //controller }; }]); 

Directive HTML

 

Usage

  

Outre les solutions d’Ilan et de BuriB (qui sont plus génériques, ce qui est bien), j’ai trouvé une solution à mon problème spécifique car j’avais besoin d’identifiants pour l’atsortingbut “for” de l’étiquette. Au lieu de cela, le code suivant peut être utilisé:

  

Le Stackoverflow-Post suivant a aidé:

https://stackoverflow.com/a/14729165/1288552