Angular中点击图片修改输入框值并提交表单的问题

问题核心是你用jQuery直接修改DOM输入框的值，但Angular的双向绑定机制没感知到这个变化，导致表单提交时还是用原来的$scope变量值。下面是两种解决方案，优先推荐Angular原生写法：

方案一：使用Angular原生绑定（推荐） #

完全抛弃jQuery的DOM操作，用Angular的ng-model、ng-click和ng-class来实现，自动同步$scope和DOM：

HTML代码 #

<!-- 静态图片示例 -->
<div class="img-block">
  <img src="path/to/img1.png" id="img1" ng-click="selectImage('img1')" ng-class="{'active': selectedImageId === 'img1'}">
</div>
<div class="img-block">
  <img src="path/to/img2.png" id="img2" ng-click="selectImage('img2')" ng-class="{'active': selectedImageId === 'img2'}">
</div>

<!-- 绑定到$scope变量的输入框 -->
<input type="text" id="app-icon-input" ng-model="selectedImageId">

控制器代码 #

angular.module('yourApp').controller('YourController', function($scope) {
  // 初始化选中的图片ID
  $scope.selectedImageId = '';
  $scope.typeSelected = false;

  $scope.selectImage = function(imgId) {
    // 更新$scope变量，自动同步到输入框
    $scope.selectedImageId = imgId;
    $scope.typeSelected = false;
    // 无需手动操作DOM的active类，ng-class会自动处理
  };
});

如果图片是动态生成的（比如从接口获取），用ng-repeat更简洁：

<div class="img-block" ng-repeat="image in imageList">
  <img ng-src="{{image.src}}" id="{{image.id}}" ng-click="selectImage(image.id)" ng-class="{'active': selectedImageId === image.id}">
</div>

控制器里只需定义$scope.imageList为你的图片数组即可。

方案二：保留jQuery事件但手动触发Angular更新（不推荐） #

如果必须保留现有jQuery事件绑定，需要在修改DOM后手动触发Angular的$apply()，让Angular感知到变量变化：

$(document).on('click', '.img-block > img', function(){
  $('.img-block > img').removeClass('active');
  $(this).addClass('active');
  var imgId = this.id;
  $('#app-icon-input').val(imgId);
  
  // 手动触发Angular的digest循环，同步$scope和DOM
  $scope.$apply(function() {
    $scope.selectedImageId = imgId;
    $scope.typeSelected = false;
  });
});

注意：这种混合写法容易引发$digest already in progress错误，建议尽量用方案一。

关键原因解释 #

Angular的双向绑定依赖$digest循环来同步$scope和DOM状态。jQuery直接修改DOM的value属性时，不会触发这个循环，导致$scope里的绑定变量没有更新，表单提交时自然拿不到新值。而用Angular原生方法修改$scope变量，会自动触发$digest，确保DOM和$scope始终同步。

内容的提问来源于stack exchange，提问作者Faisal Hani