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

Tengo este escenario simple:

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

Estoy tratando de actualizar el modelo angular con el valor que estableció 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 de 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?

ngModel escucha el evento "input", por lo que para "arreglar" su código necesitaría 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, consulte esta respuesta que le di hace un tiempo: " ¿Cómo AngularJS captura internamente eventos como 'onclick', 'onchange'? "

Pero desafortunadamente, este no es el único problema que tiene. Como se señaló con otros comentarios de publicaciones, su enfoque centrado en jQuery es simplemente incorrecto. Para obtener más información, eche un vistazo a esta publicación: ¿Cómo “pienso en AngularJS” si tengo antecedentes de jQuery? )

Espero que esto sea útil para alguien.

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

Sin embargo, pude llegar angular.element(jQuery('#myInputElement')).triggerHandler('input')a ser recogido.

La respuesta aceptada que desencadenaba un inputevento con jQuery no funcionó para mí. Crear un evento y enviarlo con JavaScript nativo fue el truco.

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

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

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

Hice 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 un día.

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

Esto es lo que hice que puede salvar tu día.

Declare una variable dentro de su etiqueta de script 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 usando el siguiente servicio de angular.

$ ventana

Ahora debajo de 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);
}}]);

He escrito este pequeño complemento para jQuery que hará todas las llamadas para .val(value)actualizar 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);

Simplemente ingrese este script después de jQuery y angular.js y val(value) actualizaciones ahora deberían funcionar bien.

Versión minimizada:

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

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

añadir .change() después de establecer el valor.

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

tampoco olvides agregar onchangeo ng-changeetiquetar en html

Hice esto para poder actualizar el valor de ngModel desde el exterior con 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");