AngularJS：拦截粘贴事件导致数据绑定失效的问题

核心问题原因 #

手动修改输入框的value并触发focus/blur无法触发AngularJS的ngModel更新流程——因为ngModel是通过自身的机制跟踪视图变化的，原生DOM的value变更不会自动触发parser链和模型同步，focus/blur也不会强制启动Angular的脏检查循环。

正确实现方式 #

要让粘贴内容经过自定义指令的parser处理并同步模型，必须通过ngModel控制器的$setViewValue方法触发官方更新流程，而不是直接操作DOM。

方案1：在控制器中处理ng-paste #

HTML代码

<input type="text" 
       ng-model="formData.input1" 
       my-custom-directive 
       ng-paste="handlePaste($event, ngModel)">

控制器代码

$scope.handlePaste = function(event, ngModel) {
  // 阻止默认粘贴行为
  event.preventDefault();

  // 获取剪贴板文本
  const pastedText = event.clipboardData.getData('text/plain');
  
  // 自定义处理粘贴内容（比如拆分、格式化或分发到其他输入框）
  const processedText = yourCustomPasteLogic(pastedText);

  // 通过ngModel触发更新流程，自动走parser链
  if (ngModel) {
    // 包裹在$apply中，确保Angular脏检查循环执行
    $scope.$apply(() => {
      ngModel.$setViewValue(processedText);
      ngModel.$render(); // 强制同步视图，可选但更稳妥
    });
  }

  // 如需向其他输入框粘贴，同样获取对应ngModel控制器处理
  // const otherNgModel = angular.element('#input2').controller('ngModel');
  // $scope.$apply(() => otherNgModel.$setViewValue(processedTextForInput2));
};

方案2：在自定义指令中封装粘贴逻辑 #

如果粘贴逻辑和自定义指令强相关，直接在指令内监听paste事件更封装：

angular.module('yourApp').directive('myCustomDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      // 原有parser逻辑
      ngModel.$parsers.push(function(viewValue) {
        // 视图值转模型值的自定义处理
        return processToModelValue(viewValue);
      });

      // 原有formatter逻辑
      ngModel.$formatters.push(function(modelValue) {
        // 模型值转视图值的自定义处理
        return processToViewValue(modelValue);
      });

      // 监听粘贴事件
      elem.on('paste', function(event) {
        event.preventDefault();
        const pastedText = event.clipboardData.getData('text/plain');
        const processedText = yourCustomPasteLogic(pastedText);

        // 触发ngModel更新流程
        scope.$apply(() => {
          ngModel.$setViewValue(processedText);
          ngModel.$render();
        });
      });
    }
  };
});

关键知识点 #

• $setViewValue：会将传入的视图值推入ngModel的parser链，经过自定义指令的parser处理后自动更新底层模型，同时触发$viewChangeListeners（也就是ng-change事件）。
• scope.$apply()：因为paste是原生DOM事件，不在Angular的脏检查循环范围内，必须手动调用$apply触发循环，确保模型变更同步到视图并触发相关事件。

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