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:

  • Angular.js Pass-Filter zu Richtungs-Bidirektional ('=') Attribut
  • Inwinkeln Sie den Winkel in den Winkel
  • Kann das "Protokoll" von undefined nicht lesen
  • Ionen-Inhalt und Ionen-Fußzeile haben unterschiedliche $ Umfang
  • Probleme bei der Integration von Facebook-Freigabe in meine SPA-Anwendung
  • Verwirrt über AngularJS-Abhängigkeit Injektion Inkonsistenz
  •  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"

  • NgModel 'tiefe Objekte Schaffung Mechanismus
  • AngularJS Service Undefined: Unbekannter Anbieter: $ scopeProvider <- $ scope
  • Ionen + Winkel-POST-Anforderungsrückkehrzustand 404
  • NgHint-Plugin kann nicht ausgeführt werden, da ngHint-Code nie in die Seite aufgenommen wurde
  • So ändern Sie den Seitentitel in Angular mit $ routeProvider
  • AngularJS ui-Router: Wie kann man typische Daten global für alle Routen lösen?
  • 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.