AngularJS: ng modeli bağlama, jQuery ile değiştirildiğinde güncellenmiyor

Bu benim HTML’im:

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

Kutuya yazdığımda model 2 yollu bağlama mekanizması ile güncelleniyor. Tatlı.

Ancak bunu JQuery aracılığıyla yaptığımda ...

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

Modeli güncellemez. Neden?

Angular bu değişikliği bilmiyor. Bunun için şunları aramalı $scope.$digest()veya içinde değişiklik yapmalısınız $scope.$apply():

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

Bkz bu daha iyi anlamak için kirli denetimine

GÜNCELLEME : İşte bir örnek

Sadece kullan;

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

Değişkeni doğrudan kapsamın karşısına koymazsanız daha güvenilir bir şekilde güncellendiğini buldum.

Bazı "dateObj.selectedDate" kullanmayı deneyin ve denetleyicide selectedDate'i bir dateObj nesnesine şu şekilde ekleyin:

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

Bu benim için çalıştı.

Bunu dene

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

Fonksiyonunuzun sonunda aşağıdaki satırı çalıştırın:

$ kapsam. $ uygula ()

Angular'ın Kapsamı dışında ne olursa olsun, Angular bunu asla bilemez.

Özet döngüsü, modelden -> denetleyiciden ve sonra denetleyiciden -> modelden değişiklikleri koyar.

En son Modeli görmeniz gerekiyorsa, özet döngüsünü tetiklemeniz gerekir

Ancak devam eden bir sindirim döngüsü şansı var, bu yüzden döngüyü kontrol etmemiz ve başlatmamız gerekiyor.

Tercihen her zaman güvenli bir başvuru yapın.

       $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 dizileri ve nesneleri başvuruya göre geçirirken dize, sayılar ve mantıksal değerleri değere göre geçirir. Böylece boş bir nesne oluşturabilir ve tarihinizi bu nesnenin bir özelliği yapabilirsiniz. Bu şekilde açısal, model değişikliklerini algılayacaktır.

Denetleyicide

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

Html olarak

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

Giriş öğesinin değişim olayını tetiklemelisiniz çünkü ng-modeli giriş olaylarını dinler ve kapsam güncellenir. Ancak, normal jQuery tetikleyicisi benim için çalışmadı . Ama işte bir cazibe gibi çalışan şey

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

Takip işe yaramadı

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

Sentetik olaylar oluşturma ve gönderme hakkında daha fazla bilgi edinebilirsiniz .

JQuery için bu küçük eklentiyi yazdım .val(value), eğer mevcutsa açısal öğeyi güncellemek için tüm çağrıları yapacak :

(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);

Sadece jQuery ve angular.js'den sonra bu komut dosyasını açın ve val(value)güncellemeler artık iyi oynamalıdır.

Küçültülmüş sürüm:

!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);

Misal:

// 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>

Bu cevap, cevabımdan aynen başka bir benzer soruya kopyalandı .

Sadece kullan:

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

onun yerine:

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