AngularJS: la liaison ng-model ne se met pas à jour lorsqu'elle est modifiée avec jQuery

Ceci est mon HTML:

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

Lorsque je tape dans la boîte, le modèle est mis à jour via le mécanisme de liaison bidirectionnelle. Doux.

Cependant, quand je fais cela via JQuery ...

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

Il ne met pas à jour le modèle. Pourquoi?

Angular n'est pas au courant de ce changement. Pour cela, vous devez appeler $scope.$digest()ou effectuer le changement à l'intérieur de $scope.$apply():

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

Voir ceci pour mieux comprendre la vérification sale

MISE À JOUR : Voici un exemple

Utilisez simplement;

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

J'ai trouvé que si vous ne mettez pas la variable directement dans la portée, elle se met à jour de manière plus fiable.

Essayez d'utiliser un "dateObj.selectedDate" et dans le contrôleur, ajoutez le selectedDate à un objet dateObj comme suit:

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

Cela a fonctionné pour moi.

Essaye ça

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

Exécutez simplement la ligne suivante à la fin de votre fonction:

$ scope. $ apply ()

Quoi qu'il arrive en dehors de la portée d'Angular, Angular ne le saura jamais.

Le cycle de résumé met les modifications du modèle -> contrôleur, puis du contrôleur -> modèle.

Si vous avez besoin de voir le dernier modèle, vous devez déclencher le cycle de résumé

Mais il y a une chance qu'un cycle de digestion soit en cours, nous devons donc vérifier et lancer le cycle.

De préférence, effectuez toujours une application en toute sécurité.

       $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 transmet la chaîne, les nombres et les booléens par valeur pendant qu'il transmet les tableaux et les objets par référence. Vous pouvez donc créer un objet vide et faire de votre date une propriété de cet objet. De cette façon, angular détectera les changements de modèle.

Dans le contrôleur

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

En html

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

Vous devez déclencher l' événement de modification de l'élément d'entrée car ng-model écoute les événements d'entrée et la portée sera mise à jour. Cependant, le déclencheur jQuery régulier ne fonctionnait pas pour moi. Mais voici ce qui fonctionne comme un charme

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

Le suivi n'a pas fonctionné

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

Vous pouvez en savoir plus sur la création et la distribution d'événements synthétiques .

J'ai écrit ce petit plugin pour jQuery qui fera tous les appels pour .val(value)mettre à jour l'élément angulaire s'il est présent:

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

Insérez simplement ce script après jQuery et angular.js et les val(value)mises à jour devraient maintenant fonctionner correctement .

Version réduite:

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

Exemple:

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

Cette réponse a été copiée textuellement de ma réponse à une autre question similaire .

Utilisez simplement:

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

au lieu de:

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