Angularjs-gettext: translate text in placeholder
I am using the angular-gettext plugin , but I am having trouble figuring out how to translate the placeholder. It works:
<legend translate>Lower secondary studies</legend>
When I run grunt, the line 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 text: Degree title
. I tried to add the attribute translated to the input field, but the line is not inserted into the .pot file. I've also tried the following:
placeholder="{{ Degree title}}"
but not success. How can I fix this?
source to share
Copy attached from fine documents (don't thank me too much;)
Using custom annotations
If you have to constantly translate the same attribute, you can tell gettext to pick it up as translation. After that, it's up to you how to translate it. For example, if you translate the placeholder attribute on each input, chances are you are doing something like:
<input placeholder="{{ 'Input something here' | translate }}">
If you want to skip the need to add data binding and filter translation 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']
}
}, }, })
Subsequently, you need to implement a directive that transforms 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);
} }; }]);
Finally, you can continue to use the placeholder attribute as usual:
<input placeholder="Input something here">
source to share
You can add a new shortcut with ng-if = "false" just to generate an entry for the placeholder string in the .pot file:
<input type="text" placeholder="{{'Degree title'| translate}}" />
<label ng-if="false" translate>Degree title</label>
HTML output:
... File output:
msgid "Degree title"
msgstr ""
After running the nggettext_compile task, the placeholder should be translated.
HTML output:
source to share