通过JavaScript创建Angular Material表单时UI样式不符问题求助

你遇到的核心问题是：直接拼接HTML字符串并通过ng-bind-html插入DOM，并没有触发Angular Material组件的初始化逻辑，也没有使用Material要求的指令和结构。静态写的表单之所以样式正常，是因为Angular编译时识别了md-input-container、md-input这些指令，自动注入了对应的CSS类和交互逻辑；但动态拼接的普通label和input标签，既没有Material的专属指令，也没被Angular重新编译，自然样式和功能都不对。

不要手动拼接HTML字符串，而是直接基于你的数据模型，在ng-repeat里使用Angular Material的标准组件结构。这是最符合Angular设计理念的做法，既能保证样式一致，还能正常使用双向绑定等功能。

修改后的控制器代码 #

$scope.elements = [
  { label: "username", value: "test", type: "text" },
  { label: "password", value: "test", type: "password" }
];
// 不需要再拼接HTML到$scope.fields了

修改后的模板代码 #

<md-input-container class="md-block" ng-repeat="elem in elements">
  <label>{{elem.label}}: *</label>
  <input md-input id="test_{{$index}}" type="{{elem.type}}" ng-model="elem.value" />
</md-input-container>

为什么这样有效？ #

1. 自动触发Material组件逻辑：Angular会在ng-repeat循环时，编译每个md-input-container和md-input指令，自动添加Material所需的CSS类（比如md-input-focused、md-input-has-value）和交互行为。
2. 原生双向绑定支持：通过ng-model绑定数据，比手动拼接value属性更灵活，能实时同步输入值和数据模型。
3. 可维护性更高：数据和视图分离，后续修改字段类型、添加验证逻辑都更方便。

如果因为特殊场景必须拼接HTML字符串，你需要自定义一个指令，让Angular编译插入的HTML内容，同时确保拼接的HTML包含Material的指令：

自定义编译指令 #

app.directive('compileHtml', ['$compile', function($compile) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.compileHtml, function(htmlContent) {
      element.html(htmlContent);
      $compile(element.contents())(scope);
    });
  };
}]);

修改控制器的HTML拼接逻辑（要包含md-input指令） #

$scope.elements = [{ label: "username", value: "test" }, { label: "password", value: "test" }];
$scope.fields = [];
for (var f = 0; f < $scope.elements.length; f++) {
  var e = $scope.elements[f];
  var label = "<label>" + e.label + ": * </label>";
  // 必须加上md-input指令，否则Material样式不生效
  var input = "<input md-input id='test_" + f + "' value='" + e.value + "'/>";
  var tmp = label.concat(input);
  $scope.fields.push($sce.trustAsHtml(tmp));
}

修改模板使用自定义指令 #

<md-input-container ng-repeat="field in fields">
  <div compile-html="field"></div>
</md-input-container>

不过这种方式会增加复杂度，也容易出现绑定失效、内存泄漏等问题，优先推荐第一种方案。

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