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

Question

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

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”显示的“计算”(正确的词？)输出(这显示添加了额外的 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

Answer 1

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

这些类描述表单的状态。请参阅 Angular Forms 上的文档了解这些类的意义是什么。

回到你的问题，即使你设置了 value 属性，因为你使用的是 ng-model="epName"，无论 $scope.epName 中有什么将在输入上设置。