I have included a directive for showing placeholder in my html and datasource attribute holds the key value for my translation
<input type="text" id="txtusername" placeholder-link datasource='{"pHolderKey":"81","pHolderMessage":"User Name"}' />
And the key value for the translations are in json files as below
en-US.json
{"81":"User Name"}
de-DE.json
{"81":"Benutzername"}
And below is my directive
app.directive("placeholderLink", function ($compile, $translate, $filter) {
return {
priority: 1001, // compiles first
terminal: true, // prevent lower priority directives to compile after it
compile: function (el) {
var params = $.parseJSON(el.context.attributes['dataSource'].value);
var key = params.pHolderKey;
var value = $filter('translate')(key);
var att = "";
if (value == key)
att = params.pHolderMessage;
else
att = "{{'" + key + "'|translate}}";
el.removeAttr('placeholder-Link');
el.attr('placeholder', att);
var fn = $compile(el);
return function (scope) {
fn(scope);
};
}
};
});
I have a dropdown to change the language between en-US and de-DE (Defualt languafe set to en-US). It works fine if we have the json data (en-US & de-DE) for the key 81.
If the key is available in json, the html will be as below
<input type="text" id="txtusername" placeholder="{{'81'|translate}}" />
and the translation works fine while changing the languages.
If the key is not available in json file for en-US, but available in de-DE. Then the html is formed as below
<input type="text" id="txtusername" placeholder="User Name" />
In this case, translation wont work for rest of the languages even if the key is available in de-DE json.
I need an attribute like translate-default for the placeholder.
Is it possible.
Thanks in Advance