AngularJS手动输入textarea后$scope未更新无法填充模板问题求助

问题根因 #

代码里存在三个核心问题导致双向绑定失效：

1. 手动操作DOM破坏了AngularJS的双向绑定关系
   你在sendMessage的请求成功回调中，同时使用了$scope.newMessageContent=""和jQuery操作$('#typeMessageBox').val('')清空输入框。直接用jQuery修改表单元素的值不会同步更新AngularJS的ng-model绑定，还会切断后续的变量同步链路，导致后续修改$scope.newMessageContent时无法自动更新到视图。
2. ng-model使用基本类型变量存在作用域继承风险
   newMessageContent是直接定义在$scope下的基本类型字符串，如果你的控制器嵌套在其他指令（比如ng-if、ng-repeat）生成的子作用域下，子作用域修改基本类型变量时会在自身作用域创建一个同名副本，脱离和父作用域原变量的绑定，导致赋值不生效。
3. 下拉菜单点击场景下修改$scope变量后未触发脏检查
   Bootstrap的dropdown组件如果是jQuery初始化的，其点击事件的回调上下文可能不在AngularJS的监听范围内，你在setSelectedTemplate中修改$scope变量后没有主动触发脏检查，视图不会更新。

解决方案 #

按以下步骤修改即可修复：

步骤1：删除所有直接操作textarea DOM的代码 #

• 删掉sendMessage回调里的$('#typeMessageBox').val('')这一行，只保留$scope.newMessageContent=""即可，AngularJS的双向绑定会自动同步清空输入框。
• 修改getkeys函数，不要用jQuery拿输入框的值，直接读取$scope.newMessageContent，同时阻止回车的默认换行行为：

$scope.getkeys = function (event) {
  if(event.keyCode == 13) {
    event.preventDefault();
    $scope.sendMessage($scope.newMessageContent);
  }
}

步骤2：优化ng-model的变量结构，避免作用域继承坑 #

把newMessageContent改成对象属性的形式：

• 控制器初始化时定义：

$scope.formData = {
  newMessageContent: ''
}

• 把代码里所有用到$scope.newMessageContent的地方，统一替换为$scope.formData.newMessageContent，包括setSelectedTemplate、sendMessage里的清空逻辑等。
• 修改HTML里textarea的ng-model绑定：

<textarea id="typeMessageBox" placeholder="Write here and hit enter to send..."  ng-keypress="getkeys($event)"  rows="4" class="form-control-lg form-control" ng-model="formData.newMessageContent">
</textarea>

步骤3：setSelectedTemplate中主动触发脏检查 #

在setSelectedTemplate的逻辑结束后添加$scope.$applyAsync()，确保变量修改能同步到视图：

$scope.setSelectedTemplate = (type) => {
  switch (type) {
    case "First":
      $scope.formData.newMessageContent = "First template";
      break;
    case "Second":
      $scope.formData.newMessageContent = "Second template";
      break;
    case "Clear":
      $scope.formData.newMessageContent = "";
      break;
  }
  $scope.$applyAsync();
}

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