Actualice el modelo angular después de establecer el valor de entrada con jQuery

Tengo este simple escenario:

Elemento de entrada cuyo valor se cambia mediante el método val () de jQuery.

Estoy tratando de actualizar el modelo angular con el valor establecido por jQuery. Traté de escribir una directiva simple, pero no está haciendo lo que quiero.

Aquí está la directiva:

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

esta es la parte jQuery:

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

y html:

 
{{foo}}

Aquí está el violín con mi bash:
http://jsfiddle.net/U3pVM/743/

¿Puede alguien indicarme el camino correcto?

ngModel escucha el evento de “entrada”, por lo que para “corregir” el código necesitarás activar ese evento después de establecer el valor:

 $('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 }); 

Para la explicación de este comportamiento en particular echa un vistazo a esta respuesta que di hace un tiempo: ” ¿Cómo atrapa AngularJS internamente eventos como ‘onclick’, ‘onchange’? ”


Pero desafortunadamente, este no es el único problema que tienes. Como se señaló con otros comentarios posteriores, su enfoque jQuery-céntrico es completamente incorrecto. Para obtener más información, eche un vistazo a esta publicación: ¿Cómo puedo “pensar en AngularJS” si tengo un fondo jQuery? )

Espero que esto sea útil para alguien.

No pude obtener el evento jQuery('#myInputElement').trigger('input') para que se recoja en mi aplicación angular.

Sin embargo, pude obtener el elemento angular.element(jQuery('#myInputElement')).triggerHandler('input') para ser recogido.

No creo que se requiera jQuery aquí.

Puede usar $ watch y ng-click en su lugar

 
{{foo}}

En tu controlador:

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

Debe usar el siguiente código para actualizar el scope del modelo de entrada específico de la siguiente manera

 $('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; }); }); 

La respuesta aceptada que desencadenaba input evento de input con jQuery no me funcionó. Crear un evento y despachar con JavaScript nativo hizo el truco.

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

Realicé modificaciones solo en la inicialización del controlador agregando oyente en el botón de acción:

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

Otras soluciones no funcionaron en mi caso.

Sé que es un poco tarde para responder aquí, pero tal vez pueda ahorrar algo una vez.

He estado lidiando con el mismo problema. Un modelo no se completará una vez que actualice el valor de la entrada de jQuery. Intenté usar los eventos desencadenantes pero no obtuve ningún resultado.

Esto es lo que hice que puede salvarle el día.

Declare una variable dentro de su etiqueta de secuencia de comandos en HTML.

Me gusta:

  

Una vez que hiciste eso, usa el siguiente servicio de angular.

$ ventana

Ahora, a continuación, la función getData llamada desde el mismo scope del controlador le dará el valor que desea.

 var myApp = angular.module('myApp', []); app.controller('imageManagerCtrl',['$scope','$window',function($scope,$window) { $scope.getData = function () { console.log("Window value " + $window.inputValue); }}]); 

He escrito este pequeño complemento para jQuery que hará que todas las llamadas a .val(value) actualicen el elemento angular si está presente:

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

Solo inserte esta secuencia de comandos después de que las actualizaciones de jQuery y angular.js y val(value) ahora jueguen bien.


Versión Minificada

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

Ejemplo:

 // 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); 
   
{{output}}

Si está utilizando IE, debe usar: input.trigger (“change”);

agregue .change() después de establecer el valor.

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

no olvide agregar la etiqueta ng-change o ng-change en html