AngularJS : ng-modèle de liaison n'a pas de mise à jour lorsqu'changé avec jQuery

Angulaire ne sais pas à propos de ce changement. Pour cela, vous devez appeler $scope.$digest() ou de faire le changement à l'intérieur de $scope.$apply():

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

Voir cette pour mieux comprendre sale vérification

Mise à JOUR: Ici est un exemple

J'ai trouvé que si vous ne mettez pas la variable directement à l'encontre de la portée de la mise à jour de façon plus fiable.

Essayez d'utiliser certains "dateObj.selectedDate" et dans le contrôleur ajouter le selectedDate à un dateObj objet de la manière suivante:

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

Cela a fonctionné pour moi.

Il suffit d'exécuter la ligne suivante à la fin de votre fonction:

$scope.$appliquer()

AngularJS passer chaîne de caractères, les nombres et les booléens en valeur alors qu'il passe les tableaux et les objets par référence. Ainsi, vous pouvez créer un objet vide et faire de votre date d'une propriété de cet objet. De cette façon angulaire permettra de détecter des 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>

J'ai écrit ce petit plugin pour jQuery qui va faire tous les appels à .val(value) mise à jour de l'angulaire de l'élément 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);

Il vous suffit d'insérer ce script dans l'après jQuery et angular.js et val(value) mises à jour doivent maintenant jouer à nice.

---

Version minifiée:

!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:

JS:

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

HTML:

<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é mot à mot de ma réponse à l'autre question similaire.