为什么 AngularJS 向服务器生成的输出添加额外的类？答案

【问题标题】：Why is AngularJS adding extra classes to server-generated output?为什么 AngularJS 向服务器生成的输出添加额外的类？
【发布时间】：2015-10-10 13:47:53
【问题描述】：

我正在生成（通过 Jade + Express.js + Node.js）一个 HTML 页面，我在其中设置 input[text] 元素的 value。然而，即使这个值设置正确（通过查看源代码验证；在 FF 中按 Ctrl+U），界面显示一个空白文本框，并且检查 FF 中的元素会显示额外的 AngularJS 类添加到该input[text] 元素。

Jade 模板中的相应行：

input(type="text", class="form-control", tabindex=1, id="episodeVal", ng-model="epName", value="#{epName}")

Jade 的输出，通过 Node.js 生成（完全符合预期）：

<input type="text" tabindex="1" id="episodeVal" ng-model="epName" value="Arbit" class="form-control">

Firefox 的“Inspect element”显示的“Computed”（正确的词？）输出（这显示添加了额外的 AngularJS 类）：

<input tabindex="1" id="episodeVal" ng-model="epName" value="Arbit" class="form-control ng-pristine ng-valid ng-touched" type="text">

为什么 AngularJS 添加这些额外的类？我认为这是阻止浏览器显示为input[text] 设置的value 是否正确？

如果需要任何额外信息，请告诉我。

更新 1： 刚刚注意到封闭的表单还应用了额外的 ng-pristine 和 ng-valid）和 FF

【问题讨论】：

标签： javascript angularjs node.js express pug

【解决方案1】：

不，额外的类不会影响行为。

这些类用于描述表单的状态。请参阅Angular Forms 上的文档以了解这些类的意义。

来到您的问题，即使您设置了 value 属性，因为您使用的是 ng-model="epName"，所以 $scope.epName 中的任何内容都将设置在 input 上。

【讨论】：

我没有将$scope.epName 的值设置为任何值。如何让input[text] 的value 出现？我无法在服务器上设置$scope.epName的值...
由于 ng-model 用于支持双向绑定，因此您需要将 epName 初始化为您要显示的值。不能用 input 的 value 属性初始化。

【解决方案2】：

您不需要设置角度值，输入将自动显示她在 JS 中的模型的价值。所以如果 js 中的 epModel 等于 'someValue'，输入值会自动设置为那个。

所以不要设置输入的值，如果你还没有设置它，请在 javascript 中设置

【讨论】：

【解决方案3】：

对我有用的最终解决方案是使用ng-init 来初始化epName 的值（Jade 模板语法的片段）：

ng-init="epName = \"#{epName}\";"

输出HTML（片段）：

ng-init="epName = &quot;New One&quot;;"

在input 标签上。

感谢@Chandermani 为我指明了正确的方向。

【讨论】：