AngularJS问题：点击增减按钮无法将输入框值同步至控制器

嘿，这个问题我太熟悉了！你现在遇到的核心问题是直接用原生JS操作DOM元素的value，没有触发AngularJS的脏检查机制，导致$scope上的qty变量和输入框的DOM值脱节了。

问题根源解释 #

AngularJS的双向数据绑定（ng-model）是靠自身的脏检查来同步$scope和DOM的。你现在的按钮点击事件用原生JavaScript直接修改了input的value属性，但这种操作完全绕开了Angular的绑定逻辑——Angular根本不知道你改了DOM，自然不会更新控制器里的qty值，所以你的$watch监听不到变化。

最优解决方案：用Angular的方式处理（推荐） #

咱们把原生的onclick换成Angular的ng-click指令，直接操作$scope上的变量，让Angular自己处理同步逻辑：

修改后的HTML代码

<button ng-click="decreaseQty()" class="reduced items-count" type="button">
  <i class="fa fa-minus">&nbsp;</i>
</button>
<!-- 把type改成number，更适配数字类型的输入 -->
<input type="number" class="input-text qty" title="Qty" maxlength="12" id="qty" name="qty" ng-init="qty=1" ng-model="qty" >
<button ng-click="increaseQty()" class="increase items-count" type="button">
  <i class="fa fa-plus">&nbsp;</i>
</button>

修改后的控制器代码

// 可以把ng-init的逻辑移到控制器里，更符合Angular的代码组织规范
$scope.qty = 1;

// 减少数量的方法
$scope.decreaseQty = function() {
  if (!isNaN($scope.qty) && $scope.qty > 0) {
    $scope.qty--;
  }
};

// 增加数量的方法
$scope.increaseQty = function() {
  if (!isNaN($scope.qty)) {
    $scope.qty++;
  }
};

$scope.$watch('qty', function(val) {
  if (val) {
    alert("qty2:" + val);
  }
});

这样改完之后，不管是点击增减按钮，还是手动在输入框里输入值，$scope上的qty都会实时同步，你的$watch也能正常触发了——因为所有操作都是通过Angular的上下文进行的，脏检查会自动同步数据。

备选方案：如果一定要用原生JS操作DOM（不推荐） #

如果因为某些原因必须保留原生onclick，那你需要在修改完input的value后，手动告诉Angular去做脏检查：

把按钮的onclick代码改成这样：

// 减少按钮的onclick
onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) && qty > 0 ) result.value--; angular.element(result).scope().$apply(); return false;"

// 增加按钮的onclick
onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++; angular.element(result).scope().$apply(); return false;"

不过我非常不推荐这种方式，因为它破坏了Angular的数据绑定逻辑，容易引发难以排查的bug，还是尽量用Angular原生的指令和方法来处理。

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