Datepicker bindet nicht an das Winkelmodell

Question

Ich habe eine Datumsauswahlanweisung erstellt, die einen einzelnen Datumsauswahl aus der verbesserten Datepicker-Bibliothek verwendet. Es hat zwei Eingabe-Tags und eine OK-Schaltfläche.

Date Picker Library

Single Date Picker Example

Wenn ich den Wert des Eingabefeldes über die Tastatur ändern sich die Modelle den gewünschten Wert erhalten und Anrufe auf dem Server stattfinden, wie erwartet. Das Problem tritt auf, wenn ich die Datumsauswahl verwende. Der Wert des Modells ändert sich nicht. Es hat immer noch den gleichen Wert, den ich über die Tastatur eingestellt habe.

Aber wenn ich document.getElementById('frompicker').value benutze die Konsole zeigt es mir das richtige Datum, das ich mit dem Datepicker gesetzt.

Wenn ich keinen Wert über die Tastatur einstelle und nur das Dropdown-Menü datepicker verwende, sind die Werte der Modelle undefiniert.

Ich habe ein paar Lösungen für Angular Boostrap UI Datepicker und Angular UI Datepicker versucht. Keine von ihnen funktioniert.

bearbeiten nach einem Kommentar

-Code finden Sie hier - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx

Jede Hilfe wird sehr geschätzt :)

Answer 1

Sie sollten Umfang nach picker Wechsel über

$scope.$apply(); 

synchronisieren

oder

$scope.$evalAsync(); 

scheint es apply.daterangepicker 'Event für Ihre picker

Answer 2

ich alle Methoden versucht, in verschiedenen Antworten erwähnt. Meine Kollegen haben gesagt, dass es eine schlechte Idee ist, $scope.$evalAsync() oder $scope.$apply() unnötig zu verwenden. Unsere Codebasis verwendet nicht digest, compile und dergleichen. Das war also ein Hindernis.

Ich entschied mich schließlich, das Datum Änderung Ereignis zu erkennen, wie von Valery Kozlov (die akzeptierte Antwort) vorgeschlagen und das Modell manuell zu ändern.

Ich habe das Datum wie folgt abgerufen.

$('#frompicker').val(); // can be done without jQuery as well 

Das Modell wurde geändert.

// use Angular's $on to make things consistent if needed 

$('#frompicker').on('apply.daterangepicker', function(ev, picker) { 
    scope.vm.from_date = $('#frompicker').val();     
});