How to read value of a field updated by ng-model in jQuery

Question

HTML file

<input id="myName" ng-model="myName" val="{{myName}}">

Coffee Script file

$http.get('/api/name').then(
    (resp) ->
      $scope.myName = resp.data.name
      $('#myName').val() # this is still ""    
    ,
    (errorResp) ->
      # code
  )

As you can see from the code above I'm trying to get the value from my API and then adding it to the scope. I have an event binding in jQuery that every time the input value changes, it draws the name to a canvas. Thing is, when I bind resp.data.name to $scope.myName the .val() still returns "" as if the input haven't changed.

why need `$('#myName').val()` ? you can check by `$scope.myName` — Shaishab Roy, Mar 23 '16 at 20:30
@shaishabroy because i have another script with an event listener and would like to reuse it — Nicolas Schejtman, Mar 29 '16 at 14:56

score 1 · Answer 1 · edited May 23 '17 at 12:24

The value of input will be updated at the end of the current digest cycle. You can wait for it with a $timeout (inject it to your controller):

(resp) ->
  $scope.myName = resp.data.name
  $timeout ->
    $('#myName').val()

and HTML:

<input id="myName" ng-model="myName">

However, I strongly recommend you to read “Thinking in AngularJS” if I have a jQuery background and How does data binding work in AngularJS.

Shaishab Roy · Answer 2 · 2016-03-23T20:27:43.973

0

No need to use val="{{myName}}" in input element just use ng-model="myName" so no need use JQuery to set or get value. you can try using $timeout in your response if get data from response but input hasn't changed.

<input type="text" id="myName" ng-model="myName">

Coffee Script file

$http.get('/api/name').then(
    (resp) ->
      $scope.myName = resp.data.name    
    ,
    (errorResp) ->
      # code
  )

edited Mar 23 '16 at 20:27

answered Mar 23 '16 at 20:21

Shaishab Roy

16,335
7
50
68

How to read value of a field updated by ng-model in jQuery

2 Answers2