konflik dalam memicu rangkaian peristiwa klik dan tonton rentang dalam model kotak teks dan kotak centang di aplikasi Angularjs

Saya membuat jam tangan pada model kotak teks dan kotak centang untuk memanggil fungsi yang ditentukan khusus. Karena saya tidak ingin memanggil fungsi khusus saya di dalam jam tangan selama pemuatan awal data, di dalam jam tangan saya bergantung pada tanda needwatch kapan harus memanggil fungsi yang ditentukan khusus saya. Untuk tujuan ini saya telah menyimpan kotak centang dan kotak Teks di dalam elemen span dan ketika span diklik saya membuat tanda needWatch itu menjadi kenyataan sehingga, fungsi khusus akan dipanggil ketika model tertentu diubah, sehingga fungsi khusus ini tidak akan dipanggil saat pemuatan awal data. Logika ini berfungsi dengan baik untuk kotak Teks, (bahkan untuk drop down pilihan) tetapi gagal pada kotak centang.

Alasannya adalah, untuk Text box, SELALU, event span ng-click-nya terpicu terlebih dahulu dan kemudian fungsi jam tangan pada model Text box dijalankan berikutnya. Sedangkan untuk kotak Centang, secara acak, fungsi arlojinya terpicu terlebih dahulu dan kemudian peristiwa span ng-click dijalankan berikutnya dan sebaliknya.

Saya juga ingin kotak centang, SELALU, acara span ng-click-nya dipicu terlebih dahulu, bukan fungsi jam tangan modelnya. Apa itu mungkin?

silakan temukan plunker dan coba ubah nilai kotak teks dan kotak centang.


javascript checkbox angularjs watch angularjs-scope
person Madasu K    schedule 28.10.2015    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

Ada beberapa masalah yang tidak Anda liput, misalnya: -Saya dapat memasukkan input teks tanpa mengkliknya. (Gunakan tab sebagai gantinya)

Jadi lebih baik gunakan saja ng-change dan Anda tidak perlu omong kosong needWatch. Atau buat jam tangan berfungsi seperti ini:

 $scope.$watch('checkboxModel', function(newval, oldval) {
   if (newval != oldval) {
       console.log('watch', newval, oldval);
   }
 }, true);
person Petr Averyanov    schedule 28.10.2015

arrow_upward
1
arrow_downward

Di Angular, pendengar $watch diberi nilai baru dan nilai lama untuk ekspresi jam tangan dengan huruf tebal.

Jika tujuannya adalah untuk menghindari menjalankan fungsi kustom Anda selama inisialisasi, bandingkan nilai oldValue dan newValue. Jika keduanya sama, maka jam tangan dipanggil selama inisialisasi dan fungsi khusus Anda tidak boleh dijalankan.

Dokumentasi sudut menyarankan ini sebagai cara standar menangani siklus inisialisasi: https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Contoh:

$scope.model = { textbox: '', checkbox: false };

$scope.$watch( 'model.textbox', function( newValue, oldValue {
    if( newValue === oldValue )
        return;

    customFunction( newValue );
});

$scope.$watch( 'model.checkbox', function( newValue, oldValue ){
    if( newValue === oldValue )
        return;

    customFunction( newValue );
});

function customFunction( value ){
    console.log( "new value: " + value );
}
person Brian    schedule 28.10.2015