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

Why is AngularJS adding extra classes to server-generated output?

我正在生成(通过 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">

"Computed"(正确的词?)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-pristineng-valid)和 FF

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

这 类 是描述表格状态的地方。请参阅 Angular Forms 上的文档以了解这些 类.

的意义

关于您的问题,即使您设置值 属性,因为您使用的是 ng-model="epName"$scope.epName 中的任何内容都将设置在 input.

你不需要在angular中设置值,输入会自动显示你的模型在JS中的值。因此,如果 JS 中的 epModel 等于 'someValue',输入值将自动设置为该值。

因此,如果您还没有设置输入值,请在 javascript 中设置它

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

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

输出HTML(片段):

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

input 标签上。

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