AngularJS dynamische Formularfeld-ID mit einer Richtlinie funktioniert nicht

Beim Versuch, eine Anweisung zu einer Eingabe mit einer dynamischen ID hinzuzufügen, bindet die Verknüpfungsmethode nicht ordnungsgemäß an das Objekt. Angesichts der folgenden jsfiddle oder html:

<div ng-app="myApp" ng-controller="MyCtrl"> <p>Date: <input type="text" id="datepicker-{{id}}" datepicker></p> </div> 

Und js:

 var module = angular.module('myApp', []); module.directive('datepicker', function() { var linker = function(scope, element, attrs) { element.datepicker(); } return { restrict: 'A', link: linker } }); function MyCtrl($scope) { $scope.id = 7 } 

Was ich auf dem Konsolen-Debugger sehe, ist, dass, wenn Link aufgerufen wird, es die ID buchstäblich als "datepicker – {{id}}" und nicht "datepicker-7" zeigt.

Gibt es eine Möglichkeit, dies zu erzwingen? Ein besserer Weg, um dies zu implementieren?

Update : Sollte geklärt werden. Der Datepicker erscheint beim Anklicken, aber das Klicken auf ein Datum funktioniert nicht. Ich bekomme den Fehler: "Unvergessen Fehlende Instanzdaten für diesen Datepicker"

  • AngularJS ng-src innerhalb von iframe
  • Lange $ kompilieren Dauer, Verständnis der Art der Verzögerung in AngularJs
  • AngularJS parse string zu html
  • Winkelprüfung: Winkelmesser kann keinen Eingabewert bekommen
  • AngularJS - ng-style aktualisiert die CSS-Hintergrundeigenschaft nicht
  • Ist der Winkelbereich verbindlich & (kaufmännisch) eine einmalige Bindung?
  • Zugriff auf verschachtelte JSON-Objekte
  • Lange dauern, um zu laden
  • One Solution collect form web for “AngularJS dynamische Formularfeld-ID mit einer Richtlinie funktioniert nicht”

    Ich glaube, Sie brauchen transclude:true in Ihrem Direktiven zurückgeben Objekt, das angikuliert, um die Markup für Dinge wie {{ }} Bindungen vorzubereiten.

    Sie müssen auch den Anruf an datepicker() in einem $timeout datepicker() wickeln, um den Versuch zu verzögern, bis der nächste Winkelzyklus läuft, um sicherzustellen, dass die übersetzte ID im DOM gesetzt ist.

    Das hat für mich gearbeitet in jsfiddle

     var module = angular.module('myApp', []); module.directive('datepicker', function($timeout) { var linker = function(scope, element, attrs) { $timeout( function(){ element.datepicker(); }); } return { restrict: 'A', link: linker, transclude: true } }); function MyCtrl($scope) { $scope.id = 7 } 
    Lassen Sie uns Javascript Schönheit und nützlich machen.