angularjs - example - Id. Únicos de plantilla de directiva para elementos

ngfor angular 4 example

Question

Tengo una directiva que puede usarse varias veces en una página. En la plantilla de esta directiva, necesito usar identificadores para un elemento de entrada para poder "enlazar" una etiqueta como así:

<input type="checkbox" id="item1" /><label for="item1">open</label>

Ahora el problema es que, tan pronto como mi directiva se incluye varias veces, el ID "elemento1" ya no es único y la etiqueta no funciona correctamente (debe marcar / desmarcar la casilla cuando se haga clic).

¿Cómo se soluciona este problema? ¿Hay alguna manera de asignar un "espacio de nombres" o "prefijo" para la plantilla (como asp.net hace con el ctl00 ...- Prefijo)? O tengo que incluir una expresión angular en cada id-atributo que consta de la directiva-ID del alcance + una identificación estática. Algo como:

<input type="checkbox" id="{{directiveID}} + ''item1''" /><label for="{{directiveID}} + ''item1''">open</label>

Editar:

Mi directriz

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

Mi HTML

<div class="myDirective">
<input type="checkbox" id="item1" /><label for="item1">open</label>
</div>

Answer 1

ACTUALIZAR

Angular 1.3 introdujo una unión nativa perezosa de una sola vez. de la documentación de expresión angular :

Encuadernación de una sola vez

Una expresión que comienza con :: se considera una expresión de una sola vez. Las expresiones únicas dejarán de recalcular una vez que estén estables, lo que sucede después del primer resumen si el resultado de la expresión es un valor no indefinido (consulte el algoritmo de estabilización de valores a continuación).

Solución nativa :

.directive(''myDirective'', function() {
var uniqueId = 1;
return {
restrict: ''E'',
scope: true,
template: ''<input type="checkbox" id="{{::uniqueId}}"/>'' +
''<label for="{{::uniqueId}}">open</label>'',
link: function(scope, elem, attrs) {
scope.uniqueId = ''item'' + uniqueId++;
}
}
})

Solo ata una vez:

• Si solo necesita vincular un valor una vez que no debe usar enlaces ({{}} / ng-bind)
• los enlaces son caros porque usan $ watch. En su ejemplo, en cada $ digest, angular dirty comprueba sus ID para ver los cambios, pero solo los establece una vez.
• Verifique este módulo: https://github.com/Pasvaz/bindonce

Solución:

.directive(''myDirective'', function() {
var uniqueId = 1;
return {
restrict: ''E'',
scope: true,
template: ''<input type="checkbox"/><label>open</label>'',
link: function(scope, elem, attrs) {
var item = ''item'' + uniqueId++;
elem.find(''input'').attr(''id'' , item);
elem.find(''label'').attr(''for'', item);
}
}
})

Answer 2

Además de las soluciones de Ilan y BuriB (que son más genéricas, lo cual es bueno), encontré una solución a mi problema específico porque necesitaba ID para el atributo "para" de la etiqueta. En su lugar, se puede usar el siguiente código:

<label><input type="checkbox"/>open</label>

El siguiente -Post ha ayudado:

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

Answer 3

Agregamos un parámetro BlockId al alcance, porque usamos el id en nuestras pruebas de Selenium, por ejemplo. Todavía existe la posibilidad de que no sean únicos, pero preferimos tener un control total sobre ellos. Otra ventaja es que podemos darle al objeto una identificación más descriptiva.

Directiva JS

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

Directiva HTML

<div class="myDirective">
<input type="checkbox" id="{{::blockId}}_item1" /><label for="{{::blockId}}_item1">open</label>
</div>

Uso

<my-directive block-id="descriptiveName"></my-directive>

Answer 4

HTML

 <div class="myDirective">
<input type="checkbox" id="myItem_{{$id}}" />
<label for="myItem_{{$id}}">open myItem_{{$id}}</label>
</div>