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?

The exact case you're asking about - translating the placeholder attribute - is covered as an example in the docs at angular-gettext.rocketeer.be/dev-guide/custom-annotations. I'm too busy at right this second to write up an answer based upon this, so feel free to do so before I get round to it. — Mark Amery

Unknown Unknown · Accepted Answer · 2015-11-03T09:07:28

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">

angularjs-gettext: translate text in placeholder

2 Answers