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>
{{::$id}}
. Zu dem Zeitpunkt, als mein Kommentar abgegeben wurde, war 1.3 noch nicht erschienen.link
Methode der Direktive abzufragen :element.find(`#myItem_ ${scope.$id}`)
, weil die Vorlage ihre dynamischen Werte noch nicht kompiliert hat…AKTUALISIEREN
Angular 1.3 führte eine native faule einmalige Bindung ein. aus der Dokumentation des Winkelausdrucks :
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:
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); } } })
quelle
{{:yourExpression}}
.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>
quelle
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
quelle