Saya punya skenario sederhana ini:
Elemen input yang nilainya diubah dengan metode jQuery's val ().
Saya mencoba memperbarui model sudut dengan nilai yang ditetapkan jQuery. Saya mencoba menulis arahan sederhana, tetapi tidak melakukan apa yang saya inginkan.
Inilah arahannya:
var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
return function(scope, element, attrs) {
element.bind('change', function() {
console.log('value changed');
})
}
})
ini adalah bagian jQuery:
$(function(){
$('button').click(function(){
$('input').val('xxx');
})
})
dan html:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input test-change ng-model="foo" />
<span>{{foo}}</span>
</div>
</div>
<button>clickme</button>
Inilah biola dengan percobaan saya:
http://jsfiddle.net/U3pVM/743/
Dapatkah seseorang tolong tunjukkan saya ke arah yang benar?
Jawaban:
ngModel mendengarkan acara "input", jadi untuk "memperbaiki" kode Anda, Anda harus memicu acara itu setelah menetapkan nilainya:
Untuk penjelasan tentang perilaku khusus ini, periksa jawaban yang saya berikan beberapa waktu lalu: " Bagaimana AngularJS secara internal menangkap peristiwa seperti 'onclick', 'onchange'? "
Namun sayangnya, ini bukan satu-satunya masalah yang Anda miliki. Seperti yang ditunjukkan dengan komentar posting lainnya, pendekatan jQuery-centric Anda jelas salah. Untuk info lebih lanjut, lihat posting ini: Bagaimana cara "berpikir dalam AngularJS" jika saya memiliki latar belakang jQuery? ).
sumber
input
acara tidak berfungsi di IE termasuk IE11.input
Peristiwa hanya berfungsi ketika$sniff.hasEvent('input')
benar tetapi$sniff.hasEvent('input')
salah bahkan di IE11! Kita bisa menggunakanchange
acara sebagai gantinya.Semoga ini bermanfaat bagi seseorang.
Saya tidak bisa mendapatkan
jQuery('#myInputElement').trigger('input')
acara untuk diambil aplikasi sudut saya.Namun saya
angular.element(jQuery('#myInputElement')).triggerHandler('input')
bisa dijemput.sumber
angular.element($('#myInputElement')).triggerHandler('input')
Jawaban yang diterima yang memicu
input
acara dengan jQuery tidak berhasil untuk saya. Membuat acara dan mengirim JavaScript asli berhasil.sumber
Saya tidak berpikir jQuery diperlukan di sini.
Anda bisa menggunakan $ watch dan ng-klik saja
Di controller Anda:
sumber
Anda harus menggunakan kode berikut untuk memperbarui ruang lingkup model input spesifik sebagai berikut
sumber
var scope = angular.element($("select")).scope(); scope.$apply(function(){ scope.selectValue = newVal; });
porsi itu banyak membantu saya. Masalah saya memperbarui model sudut setelah panggilan ajax jquery dalam fungsi sukses. Itu lambat dengan $ http karena ada duplikat pendengar perubahan acara untuk elemen yang melakukan sesuatu yang lain jadi saya menggabungkannya ke dalam jQuery.$compileProvider.debugInfoEnabled(false);
atau$logProvider.debugEnabled(false);
Lihat code.angularjs.org/1.4.0/docs/guide/production untuk info lebih lanjut.Saya membuat modifikasi hanya pada inisialisasi pengontrol dengan menambahkan pendengar pada tombol tindakan:
Solusi lain tidak berfungsi dalam kasus saya.
sumber
Saya tahu agak terlambat untuk menjawab di sini, tetapi mungkin saya bisa menghemat beberapa hari sekali.
Saya telah berurusan dengan masalah yang sama. Model tidak akan terisi setelah Anda memperbarui nilai input dari jQuery. Saya mencoba menggunakan peristiwa pemicu tetapi tidak ada hasilnya.
Inilah yang saya lakukan yang dapat menyelamatkan hari Anda.
Deklarasikan variabel dalam tag skrip Anda dalam HTML.
Suka:
Setelah Anda melakukannya dengan menggunakan layanan angular di bawah ini.
Sekarang di bawah ini fungsi getData dipanggil dari lingkup pengontrol yang sama akan memberi Anda nilai yang Anda inginkan.
sumber
Saya telah menulis plugin kecil ini untuk jQuery yang akan membuat semua panggilan untuk
.val(value)
memperbarui elemen sudut jika ada:Cukup masukkan skrip ini setelah jQuery dan angular.js dan
val(value)
pembaruan sekarang akan berfungsi dengan baik.Versi yang diperkecil:
Contoh:
Tampilkan cuplikan kode
sumber
Jika Anda menggunakan IE, Anda harus menggunakan: input.trigger ("change");
sumber
tambahkan
.change()
setelah mengatur nilai.contoh:
('id').val.('value').change();
juga jangan lupa menambahkan
onchange
ataung-change
memberi tag dalam htmlsumber
Saya melakukan ini untuk dapat memperbarui nilai ngModel dari luar dengan Vanilla / jQuery:
sumber