javascript - angularjs-gettext : translate text in placeholder

Question

我正在使用插件 angular-gettext但我不知道如何翻译占位符。这有效:

<legend translate>Lower secondary studies</legend>

当我运行 grunt 时，字符串被添加到 .POT 文件中，我可以将它导出到 en.po ，...。

但我还有以下输入字段:

<input ng-model="application.lwsdegreeTitle" type="text" placeholder="Degree title" name="lwsappdegreetitle" id="lwsappdegreetitle" />

如您所见，我有一个带有文本的占位符:Degree title。我已尝试将已翻译的属性添加到输入字段，但字符串未插入到 .pot 文件中。我还尝试了以下方法:

placeholder="{{ Degree title}}" 但没有成功。我该如何解决这个问题？

Answer 1

从优秀的文档中复制粘贴(不要太感谢我 ;-)

使用自定义注释

如果您发现自己必须一直翻译相同的属性，您可以告诉 gettext 将其作为翻译。之后由您决定如何翻译。例如，如果您要翻译每个输入的占位符属性，您可能会做类似的事情:

<input placeholder="{{ 'Input something here' | translate }}">

如果你想跳过必须向每个输入添加数据绑定(bind)和翻译过滤器，你可以在你的 Grunt 配置中指定占位符作为一个属性:

grunt.initConfig({   nggettext_extract: {
    pot: {
      options: {
        attributes: ['placeholder']
      },
      files: {
        'po/template.pot': ['src/views/*.html']
      }
    },   }, })

之后您需要实现一个指令来转换占位符属性。这是一个简单的例子:

angular.module('myModule').directive('placeholder', ['gettextCatalog',
function(gettextCatalog){   return {
    restrict: 'A',
    link: function(scope, element, attrs){
      var translatedPlaceholder = gettextCatalog.getString(attrs.placeholder);
      element.attr('placeholder', translatedPlaceholder);
    }   }; }]);

最后您可以像往常一样继续使用占位符属性:

<input placeholder="Input something here">