To jest mój HTML:
<input id="selectedDueDate" type="text" ng-model="selectedDate" />
Kiedy piszę w polu, model jest aktualizowany za pomocą mechanizmu dwukierunkowego wiązania. Słodkie.
Jednak kiedy robię to przez JQuery ...
$('#selectedDueDate').val(dateText);
Nie aktualizuje modelu. Czemu?
Odpowiedzi:
Angular nie wie o tej zmianie. W tym celu należy zadzwonić
$scope.$digest()
lub dokonać zmiany w$scope.$apply()
:Zobacz to, aby lepiej zrozumieć brudne sprawdzanie
UPDATE : Oto przykład
źródło
function
$ scope. $ Apply, przekazując funkcję jako argument. A $ apply powinno zostać wywołane, kiedy dokonasz zmian w $ scope, a więc wewnątrz onSelect. Ach, spodziewam się, że umieścisz manipulację DOM wewnątrz kontrolera tylko dla przykładu, w prawdziwej aplikacji to jest złe;)datepicker="scopeKeyThatYouWant"
wprowadzeniemPo prostu użyj;
źródło
trigger('input')
w tymonSelect
przypadku z DatePicker . Prawidłowo aktualizuje wartość..val('something'
wywołania w$apply
(lub wywołanie$digest
później) nie działało.$('#selectedDueDate').val(dateText).trigger('change');
co nie działało dla mnie..trigger('input');
działa jak magiaOdkryłem, że jeśli nie umieścisz zmiennej bezpośrednio w zakresie, aktualizuje się bardziej niezawodnie.
Spróbuj użyć jakiegoś „dateObj.selectedDate” iw kontrolerze dodaj selectedDate do obiektu dateObj w następujący sposób:
To zadziałało dla mnie.
źródło
Spróbuj tego
źródło
Po prostu uruchom następujący wiersz na końcu swojej funkcji:
$ scope. $ zastosuj ()
źródło
Cokolwiek dzieje się poza zakresem Angulara, Angular nigdy się o tym nie dowie.
Cykl Digest wstawia zmiany z modelu -> kontroler a następnie ze sterownika -> model.
Jeśli chcesz zobaczyć najnowszy model, musisz uruchomić cykl podsumowania
Ale istnieje szansa, że trwa cykl podsumowania, więc musimy sprawdzić i zainicjować cykl.
Najlepiej zawsze wykonywać bezpieczne nakładanie.
źródło
AngularJS przekazuje łańcuchy, liczby i wartości logiczne według wartości, podczas gdy przekazuje tablice i obiekty przez referencje. Możesz więc utworzyć pusty obiekt i ustawić datę jako właściwość tego obiektu. W ten sposób angular wykryje zmiany modelu.
W kontrolerze
W html
źródło
Musisz wyzwolić zdarzenie zmiany elementu wejściowego, ponieważ ng-model nasłuchuje zdarzeń wejściowych, a zakres zostanie zaktualizowany. Jednak zwykły wyzwalacz jQuery nie działał dla mnie. Ale oto, co działa jak urok
Śledzenie nie działało
Możesz przeczytać więcej o tworzeniu i wysyłaniu zdarzeń syntetycznych .
źródło
Napisałem tę małą wtyczkę dla jQuery, która będzie wykonywać wszystkie wywołania
.val(value)
aktualizacji elementu kątowego, jeśli jest obecny:Po prostu włóż ten skrypt po tym, jak jQuery i angular.js, a
val(value)
aktualizacje powinny teraz działać dobrze.Wersja zminimalizowana:
Przykład:
Pokaż fragment kodu
Ta odpowiedź została dosłownie skopiowana z mojej odpowiedzi na inne podobne pytanie .
źródło
Po prostu użyj:
zamiast:
źródło