AngularJS: Die ng-Modellbindung wird nicht aktualisiert, wenn sie mit jQuery geändert wird

Das ist mein HTML:

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

Wenn ich in die Box tippe, wird das Modell über den 2-Wege-Bindungsmechanismus aktualisiert. Süss.

Allerdings , wenn ich dies tun über JQuery ...

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

Das Modell wird nicht aktualisiert. Warum?

Angular weiß nichts von dieser Änderung. Dazu sollten Sie Folgendes anrufen $scope.$digest()oder ändern $scope.$apply():

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

Sehen Sie sich das an, um die Schmutzprüfung besser zu verstehen

UPDATE : Hier ist ein Beispiel

Benutz einfach;

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

Ich habe festgestellt, dass die Variable zuverlässiger aktualisiert wird, wenn Sie sie nicht direkt in den Bereich stellen.

Versuchen Sie es mit einem "dateObj.selectedDate" und fügen Sie im Controller das selectedDate wie folgt zu einem dateObj-Objekt hinzu:

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

Das hat bei mir funktioniert.

Versuche dies

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

Führen Sie einfach die folgende Zeile am Ende Ihrer Funktion aus:

$ scope. $ apply ()

Was auch immer außerhalb des Bereichs von Angular passiert, Angular wird das nie erfahren.

Im Digest-Zyklus werden die Änderungen vom Modell -> Controller und dann vom Controller -> Modell übernommen.

Wenn Sie das neueste Modell sehen möchten, müssen Sie den Digest-Zyklus auslösen

Es besteht jedoch die Möglichkeit, dass ein Verdauungszyklus ausgeführt wird. Daher müssen wir den Zyklus überprüfen und initiieren.

Führen Sie vorzugsweise immer eine sichere Anwendung durch.

       $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 übergibt Zeichenfolgen, Zahlen und Boolesche Werte als Wert, während Arrays und Objekte als Referenz übergeben werden. Sie können also ein leeres Objekt erstellen und Ihr Datum zu einer Eigenschaft dieses Objekts machen. Auf diese Weise erkennt Angular Modelländerungen.

In der Steuerung

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

In HTML

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

Sie müssen das Änderungsereignis des Eingabeelements auslösen, da ng-model Eingabeereignisse abhört und der Bereich aktualisiert wird. Der reguläre jQuery-Trigger funktionierte jedoch bei mir nicht. Aber hier ist, was wie ein Zauber funktioniert

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

Das Folgen hat nicht funktioniert

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

Weitere Informationen zum Erstellen und Versenden synthetischer Ereignisse finden Sie hier .

Ich habe dieses kleine Plugin für jQuery geschrieben, das alle Aufrufe zum .val(value)Aktualisieren des Winkelelements ausführt, falls vorhanden:

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

Fügen Sie dieses Skript einfach nach jQuery und angle.js ein, und val(value)Updates sollten jetzt gut funktionieren .

Minimierte Version:

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

Beispiel:

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

Diese Antwort wurde wörtlich aus meiner Antwort auf eine andere ähnliche Frage kopiert .

Benutz einfach:

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

anstatt:

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