如何动态翻译 html5 占位符答案

【问题标题】：how to translate the html5 placeholders dynamically如何动态翻译 html5 占位符
【发布时间】：2014-01-28 07:15:21
【问题描述】：

我正在使用 angular-translate 将页面内容翻译成不同的语言。

<input  type ='text' placeholder = ' {username | translate}'>

当页面加载时这工作正常..但是当我使用 $translate.uses('fr') 时它无法翻译，具体取决于语言下拉列表的变化。

任何人都可以建议在语言动态变化时翻译占位符的解决方案吗？

【问题讨论】：

【解决方案1】：

你试过了吗：

<input type="text" placeholder="{{ 'my.i18n.key' | translate }}" ng-model="myModel">

【讨论】：

对我来说没有.. 不翻译运行时
对我来说它不起作用，问题出现在你在运行时而不是在开始时。
这种方法已弃用，见@armyofda12mnkeys的回答，有翻译占位符的指令
这在 Internet Explorer 上不起作用，文档对这一点非常清楚。进行插值时会出现错误/崩溃。您应该根据需要使用自定义占位符指令来处理它
这个答案很接近，但从技术上讲，使用 ng-attr-placeholder 作为属性是更好的做法，因为这样 Angular 可以推迟显示该值，直到它真正准备好（在翻译之后）。使用原始placeholder 属性时的卡顿通常非常快，以至于您看不到它，但是如果您像发布的答案那样操作，用户可能会暂时看到未翻译的密钥。

【解决方案2】：

在 angular-translate 中有一个指令可以帮助解决这个问题。见this issue。

<input placeholder="Regular Placeholder" translate translate-attr-placeholder="text" translate-value-browser="{{app.browser}}">

【讨论】：

【解决方案3】：

+ira 的解决方案对我有用。

<input type ='text' placeholder = "{'USERNAME' | translate}">

其中用户名是翻译的关键。因此，翻译 JSON 行在西班牙语中可能如下所示

"USERNAME": "Nombre",

两者一起将Nombre作为输入框内的占位符

【讨论】：

【解决方案4】：

我用这个方法：

在 en.json 中：

{
   "ENTER_TEXT": "{{label}} را وارد کنید",
   "DISCOUNT_CODE": "کد تخفیف"
}

在模板中：

<input type="text" placeholder="{{'ENTER_TEXT' | translate: {label: 'DISCOUNT_CODE' | translate} }}" >

【讨论】：

【解决方案5】：

我使用了 placeholder="{{ 'some_text' | translate }}" 而不是 placeholder="{{ "some_text" | translate }}" 对我有用

【讨论】：