Angular中通过Controller动态添加class失败，求排查原因

你遇到的问题核心是DOM选择器使用错误，导致无法找到目标元素，自然无法添加类。我们一步步拆解问题并给出修复方案：

1. 直接修复你的现有代码 #

看你requiredField函数里的这一行：

var myEl = angular.element( document.querySelector( id ) );

document.querySelector()的语法要求ID选择器必须带#前缀，你直接传入id字符串的话，它会把这个字符串当成标签名去查找（比如你传入es0+Ref，它会找<es0+Ref>标签，显然不存在），所以根本选不到目标input元素。

修改后的函数应该是这样：

vm.requiredField = requiredField;
function requiredField (id) {
  if($scope.vm.exportSupplier.form.$error.required) {
    for (var i = 0; i < $scope.vm.exportSupplier.form.$error.required.length; i++) {
      if ($scope.vm.exportSupplier.form.$error.required[i].$$attr.id == id) {
        console.log('invalid required field');
        // 给ID加上#前缀，正确匹配元素
        var myEl = angular.element( document.querySelector('#' + id) );
        myEl.addClass('top40');
      }
    }
  }
}

另外，Angular的angular.element本身支持jQuery风格的选择器，你也可以简化成：

var myEl = angular.element('#' + id);

效果是一样的。

2. 更符合Angular风格的优化方案 #

其实Angular不推荐手动操作DOM，我们可以用ng-class结合表单验证状态来实现需求，这样更优雅也更易维护：

步骤1：给表单添加name属性 #

首先确保你的父表单元素有name属性，比如：

<form name="supplierForm">
  <!-- 你的ng-repeat内容放在这里 -->
</form>

步骤2：给input添加name属性并使用ng-class #

修改input标签，去掉ng-blur调用，改用ng-class绑定：

<input class="form-control" 
       id="es{{$index}}+Ref" 
       type="text" 
       ng-model="supplier.agreementReference" 
       ng-change="vm.addExportSupplier()" 
       ng-required="vm.exportSuppliers[$index].exportSupplier"
       ng-class="{'top40': vm.exportSuppliers[$index].exportSupplier && supplierForm['es'+$index+'+Ref'].$error.required}"
       name="es{{$index}}+Ref">

这样当字段是必填且为空时，top40类会自动添加，无需手动操作DOM，完全符合Angular的数据驱动理念。

总结 #

你原来的控制台日志能打印，说明逻辑判断是对的，只是选择器没写对导致找不到元素。如果想快速修复就给选择器加#前缀；如果想更规范，推荐用ng-class的方案，避免直接操作DOM。

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