ejemplos - obtener texto de un span jquery

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

Question

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:

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

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

¿Puede alguien indicarme el camino correcto?

Answer 1

Debe usar el siguiente código para actualizar el alcance 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;
});
});

Answer 2

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.

Answer 3

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

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

Answer 4

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

Answer 5

No creo que se requiera jQuery aquí.

Puede usar $watch y ng-click en su lugar

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

En tu controlador:

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

Answer 6

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.

Answer 7

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

Answer 8

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

Answer 9

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? )

Answer 10

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:

<script>
var inputValue="";
// update that variable using your jQuery function with appropriate value, you want...
</script>

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

$ ventana

Ahora, a continuación, la función getData llamada desde el mismo alcance 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);
}}]);