AngularJS: ng-model binding tidak diupdate saat diubah dengan jQuery

Ini HTML saya:

<input id="selectedDueDate" type="text" ng-model="selectedDate" />

Saat saya mengetik ke dalam kotak, model diperbarui melalui mekanisme pengikatan 2 arah. Manis.

Namun ketika saya melakukan ini melalui JQuery ...

$('#selectedDueDate').val(dateText);

Itu tidak memperbarui model. Mengapa?

Angular tidak tahu tentang perubahan itu. Untuk ini, Anda harus memanggil $scope.$digest()atau membuat perubahan di dalam $scope.$apply():

$scope.$apply(function() { 
   // every changes goes here
   $('#selectedDueDate').val(dateText); 
});

Lihat ini untuk lebih memahami pemeriksaan kotor

UPDATE : Berikut adalah contohnya

Gunakan saja;

$('#selectedDueDate').val(dateText).trigger('input');

Saya telah menemukan bahwa jika Anda tidak menempatkan variabel secara langsung terhadap ruang lingkup, itu akan diperbarui dengan lebih andal.

Coba gunakan beberapa "dateObj.selectedDate" dan di pengontrol tambahkan selectedDate ke objek dateObj sebagai berikut:

$scope.dateObj = {selectedDate: new Date()}

Ini berhasil untuk saya.

Coba ini

var selectedDueDateField = document.getElementById("selectedDueDate");
var element = angular.element(selectedDueDateField);
element.val('new value here');
element.triggerHandler('input');

Jalankan saja baris berikut di akhir fungsi Anda:

$ scope. $ apply ()

Apapun yang terjadi di luar Scope of Angular, Angular tidak akan pernah tahu itu.

Siklus digest menempatkan perubahan dari model -> controller dan kemudian dari controller -> model.

Jika Anda perlu melihat Model terbaru, Anda perlu memicu siklus intisari

Tetapi ada kemungkinan siklus intisari sedang berlangsung, jadi kita perlu memeriksa dan memulai siklus tersebut.

Lebih disukai, selalu lakukan aplikasi yang aman.

       $scope.safeApply = function(fn) {
            if (this.$root) {
                var phase = this.$root.$$phase;
                if (phase == '$apply' || phase == '$digest') {
                    if (fn && (typeof (fn) === 'function')) {
                        fn();
                    }
                } else {
                    this.$apply(fn);
                }
            }
        };


      $scope.safeApply(function(){
          // your function here.
      });

AngularJS melewatkan string, angka, dan boolean berdasarkan nilai saat ia melewati array dan objek dengan referensi. Jadi Anda bisa membuat objek kosong dan menjadikan tanggal Anda sebagai properti dari objek itu. Dengan cara itu angular akan mendeteksi perubahan model.

Dalam pengontrol

app.module('yourModule').controller('yourController',function($scope){
$scope.vm={selectedDate:''}
});

Dalam html

<div ng-controller="yourController">
<input id="selectedDueDate" type="text" ng-model="vm.selectedDate" />
</div>

Anda harus memicu peristiwa perubahan elemen masukan karena ng-model mendengarkan peristiwa masukan dan cakupan akan diperbarui. Namun, pemicu jQuery biasa tidak berfungsi untuk saya. Tapi inilah yang berfungsi seperti pesona

$("#myInput")[0].dispatchEvent(new Event("input", { bubbles: true })); //Works

Mengikuti tidak berhasil

$("#myInput").trigger("change"); // Did't work for me

Anda dapat membaca lebih lanjut tentang membuat dan mengirimkan peristiwa sintetis .

Saya telah menulis plugin kecil ini untuk jQuery yang akan membuat semua panggilan untuk .val(value)memperbarui elemen sudut jika ada:

(function($, ng) {
  'use strict';

  var $val = $.fn.val; // save original jQuery function

  // override jQuery function
  $.fn.val = function (value) {
    // if getter, just return original
    if (!arguments.length) {
      return $val.call(this);
    }

    // get result of original function
    var result = $val.call(this, value);

    // trigger angular input (this[0] is the DOM object)
    ng.element(this[0]).triggerHandler('input');

    // return the original result
    return result; 
  }
})(window.jQuery, window.angular);

Cukup masukkan skrip ini setelah jQuery dan angular.js dan val(value)pembaruan sekarang akan berfungsi dengan baik.

Versi yang diperkecil:

!function(n,t){"use strict";var r=n.fn.val;n.fn.val=function(n){if(!arguments.length)return r.call(this);var e=r.call(this,n);return t.element(this[0]).triggerHandler("input"),e}}(window.jQuery,window.angular);

Contoh:

// the function
(function($, ng) {
  'use strict';
  
  var $val = $.fn.val;
  
  $.fn.val = function (value) {
    if (!arguments.length) {
      return $val.call(this);
    }
    
    var result = $val.call(this, value);
    
    ng.element(this[0]).triggerHandler('input');
    
    return result;
    
  }
})(window.jQuery, window.angular);

(function(ng){ 
  ng.module('example', [])
    .controller('ExampleController', function($scope) {
      $scope.output = "output";
      
      $scope.change = function() {
        $scope.output = "" + $scope.input;
      }
    });
})(window.angular);

(function($){  
  $(function() {
    var button = $('#button');
  
    if (button.length)
      console.log('hello, button');
    
    button.click(function() {
      var input = $('#input');
      
      var value = parseInt(input.val());
      value = isNaN(value) ? 0 : value;
      
      input.val(value + 1);
    });
  });
})(window.jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="example" ng-controller="ExampleController">
  <input type="number" id="input" ng-model="input" ng-change="change()" />
  <span>{{output}}</span>
  <button id="button">+</button>
</div>

Jawaban ini disalin secara verbatim dari jawaban saya ke pertanyaan serupa lainnya .

Gunakan saja:

$('#selectedDueDate').val(dateText).trigger('input');

dari pada:

$('#selectedDueDate').val(dateText);