AngularJS文本框追加字符问题：点击添加|后$scope值未更新

哈哈，这个坑我之前也踩过！本质是AngularJS的双向绑定机制和你直接用jQuery操作DOM的冲突——Angular的ng-model是通过监听特定事件（比如input、change）或者在Angular专属上下文（指令、$apply块）里更新数据来同步的，而手动用jQuery修改DOM的val()不会触发这些同步机制，所以$scope.template.synonyms自然没法拿到最新的竖线符号。

给你几个靠谱的解决思路，按推荐程度排序：

1. 直接操作$scope变量（最符合Angular设计理念） #

既然Angular是数据驱动视图，咱们直接改数据就好，视图会自动跟着更新，完全不用碰DOM：

$scope.appendPipe = function(){
  // 先处理空值情况，避免undefined拼接成字符串
  $scope.template.synonyms = ($scope.template.synonyms || '') + '|';
  
  // 用$timeout确保DOM更新后再聚焦，记得要在控制器里注入$timeout服务哦
  $timeout(function(){
    document.getElementById('synonyms').focus();
  });
}

这里用$timeout是因为Angular的$digest循环可能还没完成，文本框的DOM还没更新，延迟一下再聚焦才能生效。

2. 用jQuery操作后手动触发同步（迫不得已时用） #

如果因为特殊原因必须用jQuery操作DOM，那你得手动告诉Angular数据变了，有两种简单的方式：

方式一：触发input事件 #

ng-model会监听文本框的input事件，手动触发这个事件就能让它同步数据：

$scope.appendPipe = function(){
  var $textBox = $('#synonyms');
  $textBox.val($textBox.val() + '|');
  // 触发input事件，通知ng-model更新绑定的数据
  $textBox.trigger('input');
  $textBox.focus();
}

方式二：用$apply强制更新 #

$apply会强制Angular执行一次$digest循环，检查所有绑定的数据变化：

$scope.appendPipe = function(){
  var $textBox = $('#synonyms');
  $scope.$apply(function(){
    $textBox.val($textBox.val() + '|');
  });
  $textBox.focus();
}

小提醒 #

尽量别在Angular项目里直接用jQuery操作DOM哦，这很容易破坏双向绑定机制，也不符合Angular的设计思想。优先通过操作$scope里的数据来控制视图，能少很多莫名其妙的同步问题～

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