Aggiorna il modello angolare dopo aver impostato il valore di input con jQuery

Ho questo semplice scenario:

Elemento di input il cui valore viene modificato dal metodo val () di jQuery.

Sto cercando di aggiornare il modello angolare con il valore impostato da jQuery. Ho provato a scrivere una direttiva semplice, ma non sta facendo quello che voglio.

Ecco la direttiva:

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

questa è la parte jQuery:

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

e html:

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

<button>clickme</button>

Ecco il violino con il mio tentativo:
http://jsfiddle.net/U3pVM/743/

qualcuno può indicarmi la giusta direzione?

ngModel ascolta l'evento "input", quindi per "correggere" il tuo codice dovrai attivare l'evento dopo aver impostato il valore:

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

Per la spiegazione di questo particolare comportamento, dai un'occhiata a questa risposta che ho dato qualche tempo fa: "In che modo AngularJS rileva internamente eventi come" onclick "," onchange "? "

Ma sfortunatamente, questo non è l'unico problema che hai. Come sottolineato con altri commenti post, il tuo approccio incentrato su jQuery è chiaramente sbagliato. Per maggiori informazioni, dai un'occhiata a questo post: come faccio a "pensare in AngularJS" se ho uno sfondo jQuery? ).

Spero che questo sia utile per qualcuno.

Non sono stato in grado di ottenere l' jQuery('#myInputElement').trigger('input')evento per essere raccolto la mia app angolare.

Sono stato comunque in grado angular.element(jQuery('#myInputElement')).triggerHandler('input')di essere prelevato.

La risposta accettata che ha scatenato l' inputevento con jQuery non ha funzionato per me. La creazione di un evento e l'invio con JavaScript nativo hanno funzionato.

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

Non penso che jQuery sia richiesto qui.

È possibile utilizzare $ orologio e ng clic invece

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

Nel tuo controller:

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

È necessario utilizzare il seguente codice per aggiornare l'ambito del modello di input specifico come segue

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

Ho apportato modifiche solo all'inizializzazione del controller aggiungendo listener sul pulsante di azione:

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

Altre soluzioni non hanno funzionato nel mio caso.

So che è un po 'tardi per rispondere qui, ma forse potrei risparmiare un giorno.

Ho avuto a che fare con lo stesso problema. Un modello non verrà popolato una volta aggiornato il valore dell'input da jQuery. Ho provato a utilizzare gli eventi trigger, ma nessun risultato.

Ecco cosa ho fatto per salvarti la giornata.

Dichiara una variabile nel tag dello script in HTML.

Piace:

<script>
 var inputValue="";

// update that variable using your jQuery function with appropriate value, you want...

</script>

Una volta che l'hai fatto utilizzando il servizio angolare di seguito.

$ finestra

Ora sotto la funzione getData chiamata dallo stesso ambito del controller otterrai il valore desiderato.

var myApp = angular.module('myApp', []);

app.controller('imageManagerCtrl',['$scope','$window',function($scope,$window) {

$scope.getData = function () {
    console.log("Window value " + $window.inputValue);
}}]);

Ho scritto questo piccolo plugin per jQuery che effettuerà tutte le chiamate per .val(value)aggiornare l'elemento angolare 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);

Basta inserire questo script dopo jQuery e angular.js e gli val(value)aggiornamenti ora dovrebbero funzionare bene.

Versione minimizzata:

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

Esempio:

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

Se stai usando IE, devi usare: input.trigger ("change");

Inserisci .change() dopo aver impostato il valore.

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

inoltre, non dimenticare di aggiungere onchangeo ng-changetaggare in html

Ho fatto questo per essere in grado di aggiornare il valore di ngModel dall'esterno 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");