动态添加HTML元素时ng-style样式未生效的问题排查

我来帮你排查并解决这个问题，动态添加的字段ng-style不生效，主要有几个关键问题需要修正：

1. 修复HTML标签的转义问题 #

你代码里的formField字符串用了HTML实体<和>，这会导致$compile编译的是纯文本而非真正的DOM元素，Angular的指令（包括ng-style）自然无法生效。要把这些转义实体替换成真实的<和>标签。

2. 确保表单控件正确注册到form对象 #

动态生成的input需要在<form>标签内部，同时调整ng-style中form控件的引用方式，用方括号访问动态生成的控件名称会更可靠（避免字符串拼接的语法歧义）。

3. 初始化必要的作用域变量 #

确保$scope.obj.mobileNumberArr是已初始化的数组，避免ng-model绑定到未定义的属性导致控件状态异常。

修改后的完整代码： #

// 建议在控制器初始化时先初始化必要变量
$scope.obj = {
  fieldCount: 0,
  mobileNumberArr: []
};

$scope.addFormField = function(){ 
  let container = document.getElementById('formFieldContainer'); 
  $scope.obj.fieldCount++; 
  // 替换转义实体为真实标签，调整ng-style的控件引用方式
  let formField = '<md-input-container><label>Mobile Number</label><input type="text" required name="mobileNo_' + $scope.obj.fieldCount + '" ng-model="obj.mobileNumberArr[' + $scope.obj.fieldCount +']" ng-pattern="/^[1-9]{1}[0-9]{9}$/" ng-style="form[\'mobileNo_' + $scope.obj.fieldCount + '\'].$valid ? {\'border-color\': \'green\',\'color\': \'green\'} : {}"></md-input-container>'; 
  // 编译并链接到当前作用域
  let compiledElement = $compile(formField)($scope);
  container.appendChild(compiledElement[0]);
}

额外注意事项： #

• 确保你的表单标签上有name="form"属性，这样form对象才能在作用域中被访问到：

  <form name="form">
    <div id="formFieldContainer"></div>
    <button ng-click="addFormField()">Add Mobile Number</button>
  </form>
  

• 用ng-class替代ng-style会更符合Angular的最佳实践，也更易维护，比如：

  <!-- 先在CSS中定义样式类 -->
  <style>
    .valid-input {
      border-color: green;
      color: green;
    }
  </style>
  
  <!-- 修改input的ng-class属性 -->
  <input type="text" required name="mobileNo_' + $scope.obj.fieldCount + '" ng-model="obj.mobileNumberArr[' + $scope.obj.fieldCount +']" ng-pattern="/^[1-9]{1}[0-9]{9}$/" ng-class="{'valid-input': form[\'mobileNo_' + $scope.obj.fieldCount + '\'].$valid}">
  

这样修改后，动态添加的字段的ng-style（或ng-class）就能正常根据表单控件的验证状态生效了。

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