Eindeutige IDs für Direktivenvorlagen für Elemente in AngularJS

Ich habe eine Direktive, die auf einer Seite mehrfach verwendet werden kann. In der Vorlage dieser Direktive muss ich IDs für ein Eingabeelement verwenden, damit ich ein Label wie folgt daran "binden" kann:

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

Jetzt ist das Problem, sobald meine Direktive mehrmals enthalten ist, die ID "item1" nicht mehr eindeutig ist und die Beschriftung nicht richtig funktioniert (sie sollte das Kontrollkästchen aktivieren / deaktivieren, wenn sie angeklickt wird).

Wie wird dieses Problem behoben? Gibt es eine Möglichkeit, der Vorlage einen "Namespace" oder ein "Präfix" zuzuweisen (wie es asp.net mit dem Präfix ctl00 ...- tut)? Oder muss ich in jedes ID-Attribut einen Winkelausdruck einfügen, der aus der Direktiven-ID aus dem Bereich + einer statischen ID besteht? Etwas wie:

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

Bearbeiten:

Meine Richtlinie

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

Mein HTML

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

HTML

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

AKTUALISIEREN

Angular 1.3 führte eine native faule einmalige Bindung ein. aus der Dokumentation des Winkelausdrucks :

Einmalige Bindung

Ein Ausdruck, der mit :: beginnt, wird als einmaliger Ausdruck betrachtet. Einmalige Ausdrücke werden nicht mehr neu berechnet, sobald sie stabil sind. Dies geschieht nach dem ersten Digest, wenn das Ausdrucksergebnis ein nicht undefinierter Wert ist (siehe Wertstabilisierungsalgorithmus unten).

Native Lösung :

.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++;
        }
    }
})

Nur einmal binden:

• Wenn Sie einen Wert nur einmal binden müssen, sollten Sie keine Bindungen verwenden ({{}} / ng-bind).
• Bindungen sind teuer, weil sie $ watch verwenden. In Ihrem Beispiel überprüft Angular Dirty Ihre IDs bei jedem $ Digest auf Änderungen, aber Sie legen sie nur einmal fest.
• Überprüfen Sie dieses Modul: https://github.com/Pasvaz/bindonce

Lösung:

.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);
        }
    }
})

Wir fügen dem Bereich einen BlockId-Parameter hinzu, da wir die ID beispielsweise in unseren Selenium-Tests verwenden. Es besteht immer noch die Möglichkeit, dass sie nicht einzigartig sind, aber wir bevorzugen die vollständige Kontrolle über sie. Ein weiterer Vorteil ist, dass wir dem Artikel eine aussagekräftigere ID geben können.

Richtlinie JS

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

Direktive HTML

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

Verwendung

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

Abgesehen von den Lösungen von Ilan und BuriB (die allgemeiner sind, was gut ist), habe ich eine Lösung für mein spezifisches Problem gefunden, da ich IDs für das Attribut "for" des Etiketts benötigte. Stattdessen kann der folgende Code verwendet werden:

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

Der folgende Stackoverflow-Post hat geholfen:

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