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

Question

J'ai ce simple scénario :

É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 que jQuery a défini. J'ai essayé d'écrire une directive simple, mais elle 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 m'indiquer la bonne direction ?

Answer 1

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 capte-t-il en interne des événements tels que "onclick" ou "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 erronée. Pour plus d'informations, consultez cet article : Comment puis-je "penser en AngularJS" si j'ai une formation en jQuery ? ).

Answer 2

J'espère que cela sera utile à quelqu'un.

Je n'ai pas réussi à obtenir le jQuery('#myInputElement').trigger('input') pour être récupéré par mon application angulaire.

J'ai cependant réussi à obtenir angular.element(jQuery('#myInputElement')).triggerHandler('input') pour être ramassé.

Answer 3

La réponse acceptée qui déclenchait input avec jQuery n'a pas fonctionné pour moi. La création d'un événement et sa répartition avec le JavaScript natif ont fait l'affaire.

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

Answer 4

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

Vous pouvez utiliser Montre y ng-click au lieu de

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

Answer 5

Vous devez utiliser le code suivant afin de 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;
    });
});