Mettre à jour le modèle angulaire après avoir défini la valeur d'entrée avec jQuery

J'ai ce scénario simple:

Élément d'entrée dont la valeur est modifiée par la méthode val () de jQuery.

J'essaie de mettre à jour le modèle angulaire avec la valeur définie par jQuery. J'ai essayé d'écrire une directive simple, mais ça ne fait pas ce que je veux.

Voici la directive:

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})

c'est la partie jQuery:

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})

et html:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

<button>clickme</button>

Voici le violon avec mon essai:
http://jsfiddle.net/U3pVM/743/

Quelqu'un peut-il s'il vous plaît me diriger dans la bonne direction?

ngModel écoute l'événement "input", donc pour "corriger" votre code, vous devez déclencher cet événement après avoir défini la valeur:

$('button').click(function(){
    var input = $('input');
    input.val('xxx');
    input.trigger('input'); // Use for Chrome/Firefox/Edge
    input.trigger('change'); // Use for Chrome/Firefox/Edge + IE11
});

Pour l'explication de ce comportement particulier, consultez cette réponse que j'ai donnée il y a quelque temps: " Comment AngularJS intercepte-t-il en interne des événements tels que 'onclick', 'onchange'? "

Mais malheureusement, ce n'est pas le seul problème que vous rencontrez. Comme indiqué dans d'autres commentaires, votre approche centrée sur jQuery est tout simplement fausse. Pour plus d'informations, jetez un œil à cet article: Comment est-ce que je "pense dans AngularJS" si j'ai un arrière-plan jQuery? ).

J'espère que cela est utile pour quelqu'un.

Je n'ai pas pu récupérer l' jQuery('#myInputElement').trigger('input')événement dans mon application angulaire.

J'ai cependant pu angular.element(jQuery('#myInputElement')).triggerHandler('input')être pris en charge.

La réponse acceptée qui déclenchait un inputévénement avec jQuery ne fonctionnait pas pour moi. La création d'un événement et l'envoi avec JavaScript natif ont fait l'affaire.

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

Je ne pense pas que jQuery soit nécessaire ici.

Vous pouvez utiliser $ watch et ng-click à la place

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input test-change ng-model="foo" />
    <span>{{foo}}</span>

    <button ng-click=" foo= 'xxx' ">click me</button>
    <!-- this changes foo value, you can also call a function from your controller -->
  </div>
</div>

Dans votre contrôleur:

$scope.$watch('foo', function(newValue, oldValue) {
  console.log(newValue);
  console.log(oldValue);
});

Vous devez utiliser le code suivant pour mettre à jour la portée du modèle d'entrée spécifique comme suit

$('button').on('click', function(){
    var newVal = $(this).data('val');
    $('select').val(newVal).change();

    var scope = angular.element($("select")).scope();
    scope.$apply(function(){
        scope.selectValue = newVal;
    });
});

J'ai apporté des modifications uniquement à l'initialisation du contrôleur en ajoutant un écouteur sur le bouton d'action:

$(document).on('click', '#action-button', function () {
        $timeout(function () {
             angular.element($('#input')).triggerHandler('input');
        });
});

D'autres solutions n'ont pas fonctionné dans mon cas.

Je sais qu'il est un peu tard pour répondre ici, mais je pourrais peut-être en sauver une fois.

J'ai été confronté au même problème. Un modèle ne se remplira pas une fois que vous aurez mis à jour la valeur d'entrée de jQuery. J'ai essayé d'utiliser des événements déclencheurs mais aucun résultat.

Voici ce que j'ai fait pour vous sauver la vie.

Déclarez une variable dans votre balise de script en HTML.

Comme:

<script>
 var inputValue="";

// update that variable using your jQuery function with appropriate value, you want...

</script>

Une fois que vous avez fait cela en utilisant le service ci-dessous d'angular.

$ fenêtre

Maintenant, ci-dessous, la fonction getData appelée à partir de la même portée de contrôleur vous donnera la valeur souhaitée.

var myApp = angular.module('myApp', []);

app.controller('imageManagerCtrl',['$scope','$window',function($scope,$window) {

$scope.getData = function () {
    console.log("Window value " + $window.inputValue);
}}]);

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>

Si vous utilisez IE, vous devez utiliser: input.trigger ("change");

ajouter .change()après avoir défini la valeur.

exemple:('id').val.('value').change();

n'oubliez pas non plus d'ajouter onchangeou de ng-changetaguer en html

J'ai fait cela pour pouvoir mettre à jour la valeur de ngModel de l'extérieur avec Vanilla / jQuery:

function getScope(fieldElement) {
    var $scope = angular.element(fieldElement).scope();
    var nameScope;
    var name = fieldElement.getAttribute('name');
    if($scope) {
        if($scope.form) {
            nameScope = $scope.form[name];
        } else if($scope[name]) {
            nameScope = $scope[name];
        }
    }
    return nameScope;
}

function setScopeValue(fieldElement, newValue) {
    var $scope = getScope(fieldElement);
    if($scope) {
        $scope.$setViewValue(newValue);
        $scope.$validate();
        $scope.$render();
    }
}

setScopeValue(document.getElementById("fieldId"), "new value");