AngularJS中textarea设置disabled属性失效的解决方法

以下是经过验证的排查路径和可直接落地的实现方式，按优先级排查即可解决问题：

• 校验基础绑定写法
  不要混用原生disabled属性和ng-disabled指令，标准可生效的基础写法如下，确保ng-model绑定正常：

  <!-- 模板部分 -->
  <textarea 
    id="targetTextarea"
    ng-model="formData.content" 
    ng-disabled="formConfig.textareaDisabled"
  ></textarea>
  

  控制器中对应状态定义要避免作用域继承问题，不要直接挂载基础类型变量，用对象包裹控制状态：

  // 控制器部分
  angular.module('yourApp').controller('FormController', ['$scope', '$timeout', function($scope, $timeout) {
    // 用对象挂载配置，避免ng-if/ng-repeat等子作用域覆盖绑定值
    $scope.formConfig = {
      textareaDisabled: true
    };
    $scope.formData = {
      content: ''
    };
  }]);
  

• 排查指令/组件冲突
  90%以上的同场景失效问题都源于这类冲突：

  打开浏览器开发者工具定位到目标textarea元素，检查是否被自定义的权限控制指令、表单自动填充指令、富文本编辑器组件劫持。这类逻辑通常只做了input元素的兼容，会在渲染完成后主动移除textarea上的disabled属性，覆盖ng-disabled的绑定逻辑。如果是富文本编辑器替换了原生textarea生成可编辑div，原生disabled属性本身不生效，需要调用对应编辑器提供的禁用/只读API实现效果。

• DOM操作兜底方案
  如果排查完冲突仍存在状态同步问题，在AngularJS的digest循环内执行DOM操作，避免视图和模型不同步：

  // 注入$timeout服务，确保DOM渲染完成后执行
  $timeout(function() {
    const textareaEl = angular.element('#targetTextarea');
    textareaEl.attr('disabled', 'disabled');
    // 同步内容状态，避免视图值和模型值不一致
    textareaEl.val($scope.formData.content);
  });
  

  不要在AngularJS上下文外（比如原生setTimeout、原生事件回调里）直接操作DOM，会导致状态不刷新。

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