如何在 jQuery 中读取由 ng-model 更新的字段的值答案

【问题标题】：How to read value of a field updated by ng-model in jQuery如何在 jQuery 中读取由 ng-model 更新的字段的值
【发布时间】：2016-07-11 06:55:48
【问题描述】：

HTML 文件

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

咖啡脚本文件

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

正如您从上面的代码中看到的那样，我试图从我的 API 中获取值，然后将其添加到作用域中。我在 jQuery 中有一个事件绑定，每次输入值更改时，它都会将名称绘制到画布上。问题是，当我将 resp.data.name 绑定到 $scope.myName 时， .val() 仍然返回 "" ，就好像输入没有改变一样。

【问题讨论】：

为什么需要$('#myName').val()？你可以通过$scope.myName查看
@shaishabroy 因为我有另一个带有事件侦听器的脚本并且想重用它

标签： jquery html angularjs

【解决方案1】：

输入的值将在当前摘要周期结束时更新。您可以使用$timeout 等待它（将其注入您的控制器）：

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

和 HTML：

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

但是，我强烈建议您阅读“Thinking in AngularJS” if I have a jQuery background 和How does data binding work in AngularJS。

【讨论】：

【解决方案2】：

无需在输入元素中使用val="{{myName}}"，只需使用ng-model="myName"，因此无需使用JQuery 来设置或获取值。如果从响应中获取数据但输入没有改变，您可以尝试在响应中使用$timeout。

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

咖啡脚本文件

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

【讨论】：