Update Angular model after setting input value with jQuery

Question

I have this simple scenario     Input element which value is changed by jQuery s val   method   I am trying to update the angular model with the value that jQuery set  I tried to write a simple directive  but it s not doing what I want    Here s the directive   var myApp   angular module  myApp        myApp directive  testChange   function         return function scope  element  attrs                    element bind  change   function                 console log  value changed                          this is the jQuery part       function           button   click function               input   val  xxx                and html    lt div ng-app  myApp  gt       lt div ng-controller  MyCtrl  gt           lt input test-change ng-model  foo    gt           lt span gt   foo   lt  span gt       lt  div gt   lt  div gt    lt button gt clickme lt  button gt    Here is the fiddle with my try  http   jsfiddle net U3pVM 743   Can someone please point me in the right direction

User · Answer

Hope this is useful for someone    I was unable to get the jQuery   myInputElement   trigger  input   event to be picked up my angular app   I was however  able to get angular element jQuery   myInputElement    triggerHandler  input   to be picked up

User · Answer

I ve written this little plugin for jQuery which will make all calls to  val value  update the angular element if present    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     Just pop this script in after jQuery and angular js and val value  updates should now play nice     Minified version    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       Example    x000D   x000D     the function x000D   function    ng    x000D     use strict   x000D     x000D    var  val     fn val  x000D     x000D      fn val   function  value    x000D      if   arguments length    x000D        return  val call this   x000D        x000D       x000D      var result    val call this  value   x000D       x000D      ng element this 0   triggerHandler  input    x000D       x000D      return result  x000D       x000D      x000D     window jQuery  window angular   x000D   x000D   function ng    x000D    ng module  example       x000D       controller  ExampleController   function  scope    x000D         scope output    output   x000D         x000D         scope change   function     x000D           scope output         scope input  x000D          x000D          x000D     window angular   x000D   x000D   function       x000D      function     x000D      var button       button    x000D     x000D      if  button length  x000D        console log  hello  button    x000D       x000D      button click function     x000D        var input       input    x000D         x000D        var value   parseInt input val     x000D        value   isNaN value    0   value  x000D         x000D        input val value   1   x000D          x000D        x000D     window jQuery   x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div ng-app  example  ng-controller  ExampleController  gt  x000D     lt input type  number  id  input  ng-model  input  ng-change  change      gt  x000D     lt span gt   output   lt  span gt  x000D     lt button id  button  gt   lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

add  change   after setting the value   example   id   val   value   change     also don t forget to add onchange or ng-change tag in html

User · Answer

I made modifications on only controller initialization by adding listener on action button     document  on  click     action-button   function               timeout function                   angular element     input    triggerHandler  input                      Other solutions did not work in my case

User · Answer

Not what OP asked  but for any soul that might be as well writing an userscript that goes through input fields and fills the required details  Nothing  fully  worked for me  but finally managed to get it done this way  var el       sp formfield fw ip    el val  quot some value quot    angular element el  triggerHandler  focus    angular element el  triggerHandler  input    angular element el  triggerHandler  change    angular element el  triggerHandler  blur     Open developer tools  and inspect input field for added events  There I found all of them  in my case   focus  input  change and blur

User · Answer

I don t think jQuery is required here   You can use  watch and ng-click instead   lt div ng-app  myApp  gt     lt div ng-controller  MyCtrl  gt       lt input test-change ng-model  foo    gt       lt span gt   foo   lt  span gt        lt button ng-click   foo   xxx    gt click me lt  button gt       lt  -- this changes foo value  you can also call a function from your controller -- gt     lt  div gt   lt  div gt    In your controller      scope  watch  foo   function newValue  oldValue      console log newValue     console log oldValue

User · Answer

ngModel listens for  input  event  so to  fix  your code you d need to trigger that event after setting the value      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       For the explanation of this particular behaviour check out this answer that I gave a while ago   How does AngularJS internally catch events like  onclick    onchange       But unfortunately  this is not the only problem you have  As pointed out with other post comments  your jQuery-centric approach is plain wrong  For more info take a look at this post  How do I    think in AngularJS    if I have a jQuery background

User · Answer

I know it s a bit late to answer here but maybe I may save some once s day   I have been dealing with the same problem  A model will not populate once you update the value of input from jQuery  I tried using trigger events but no result   Here is what I did that may save your day   Declare a variable within your script tag in HTML   Like    lt script gt   var inputValue         update that variable using your jQuery function with appropriate value  you want      lt  script gt    Once you did that by using below service of angular       window   Now below getData function called from the same controller scope will give you the value you want   var myApp   angular module  myApp         app controller  imageManagerCtrl     scope    window  function  scope  window      scope getData   function          console log  Window value      window inputValue

User · Answer

I did this to be able to update the value of ngModel from the outside with 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

User · Answer

The accepted answer which was triggering input event with jQuery didn t work for me  Creating an event and dispatching with native JavaScript did the trick      input   0  dispatchEvent new Event  input     bubbles  true

User · Answer

If you are using IE  you have to use  input trigger  change

User · Answer

You have to use the following code in order to update the scope of the specific input model as follows     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

[jquery] Update Angular model after setting input value with jQuery

Examples related to jquery

Examples related to angularjs

Examples related to bind

Examples related to directive