Atualizar modelo angular depois de definir o valor de input com jQuery

Eu tenho este cenário simples:

Elemento de input cujo valor é alterado pelo método val () do jQuery.

Eu estou tentando atualizar o modelo angular com o valor definido pelo jQuery. Eu tentei escrever uma diretiva simples, mas ela não está fazendo o que eu quero.

Aqui está a diretiva:

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

esta é a parte do jQuery:

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

e html:

 
{{foo}}

Aqui está o violino com a minha tentativa:
http://jsfiddle.net/U3pVM/743/

Alguém pode, por favor, apontar a direção certa?

ngModelo ouve o evento “input”, portanto, para “corrigir” seu código, você precisa acionar esse evento depois de definir o 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 a explicação deste comportamento em particular, confira esta resposta que dei há pouco: ” Como o AngularJS captura internamente events como ‘onclick’, ‘onchange’? ”


Mas infelizmente, esse não é o único problema que você tem. Como apontado com outros comentários post, sua abordagem cinput em jQuery está totalmente errada. Para mais informações, dê uma olhada neste post: Como eu “penso em AngularJS” se eu tenho um fundo jQuery? ).

Espero que isso seja útil para alguém.

Não consegui obter o evento jQuery('#myInputElement').trigger('input') para pegar meu aplicativo angular.

No entanto, consegui obter o angular.element(jQuery('#myInputElement')).triggerHandler('input') para ser selecionado.

Eu não acho que o jQuery é necessário aqui.

Você pode usar $ watch e ng-click

 
{{foo}}

No seu controlador:

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

Você precisa usar o código a seguir para atualizar o escopo do modelo de input específico da seguinte maneira

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

A resposta aceita que estava acionando o evento de input com o jQuery não funcionou para mim. Criar um evento e despachar com JavaScript nativo fez o truque.

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

Fiz modificações apenas na boot do controlador adicionando o listener no botão de ação:

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

Outras soluções não funcionaram no meu caso.

Eu sei que é um pouco tarde para responder aqui, mas talvez eu possa salvar alguns dia de uma vez.

Eu tenho lidado com o mesmo problema. Um modelo não será preenchido depois que você atualizar o valor da input do jQuery. Eu tentei usar events de gatilho, mas nenhum resultado.

Aqui está o que eu fiz que pode salvar seu dia.

Declare uma variável dentro da sua tag de script em HTML.

Gostar:

  

Uma vez que você fez isso usando abaixo do serviço de angular.

$ janela

Agora, abaixo da function getData chamada do mesmo escopo do controlador, você obterá o valor desejado.

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

Eu escrevi este pequeno plugin para jQuery que fará com que todas as chamadas para .val(value) atualizem o elemento angular se 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); 

Apenas insira este script depois que o jQuery e as atualizações do angular.js e val(value) agora estiverem funcionando bem.


Versão reduzida:

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

Exemplo:

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

Se você estiver usando o IE, você tem que usar: input.trigger (“change”);

adicione .change() depois de definir o valor.

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

também não se esqueça de adicionar tag onchange ou ng-change em html