angularjs-gettext: translate text in placeholder

Question

I'm using the plugin angular-gettext but I'm having troubles knowing how to translate the placeholder. This works:

<legend translate>Lower secondary studies</legend>

When I run grunt the string is added to the .POT file and I can export it to en.po , ... .

But I also have the following input field:

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

As you can see I have a placeholder with text: Degree title . I've tried adding the attribute translated to the input field but the string doesn't get inserted in the .pot file. I also tried the following:

placeholder="{{ Degree title}}" but no success. How can I fix this?

Answer 1

Copy-pasted from the fine docs (don't thank me too much ;-)

Using custom annotations

If you're finding yourself having to translate the same attribute all the time, you can tell gettext to pick it up as a translation. After that its up to you to define how its being translated. For example, if you're translating the placeholder attribute on every input, chances are you're doing something like:

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

If you want to skip having to add the data-binding and translate filter to every input, you can specify placeholder as an attribute in your Grunt config:

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

Afterwards you need to implement a directive that translates the placeholder attribute. Here's a simple example:

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);
    }   }; }]);

And finally you can continue using the placeholder attribute as usual:

<input placeholder="Input something here">

Answer 2

You can add a new label with ng-if="false", just to generate in .pot file the entry for the placeholder string:

<input type="text" placeholder="{{'Degree title'| translate}}" />
<label ng-if="false" translate>Degree title</label>

HTML output:

.Pot file output:

msgid "Degree title" msgstr ""

After running the nggettext_compile task the placeholder must be translated.

HTML output: