I am using angular-translate to translate my Angular app. This is working well so far.
Now I have the requirement to translate some parts of the page in another language than the rest of the page.
Specifically:
The shell of the page (navigation, header etc) should be translated
according to the language I have set with `$translate.use(lang).
Some content is only available in a specific language. Therefore
the section of the page that displays that content should be
translated to the language that matches the content.
Example:
<!--v this should be English -->
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong translate>ALERT</strong>
</div>
<!--^ this should be English -->
<div class="panel panel-default">
<!--v this should be English -->
<div class="panel-heading">
<h3 class="panel-title" translate>TITLE</h3>
</div>
<!--^ this should be English -->
<!--v this should be German-->
<div class="panel-body">
<label class="control-label" translate="DESCRIPTION" translate-values="{ p0: someParameter }"></label>
[...]
</div>
<!--^ this should be German-->
</div>
Also I need variable replacement in the translation mechanism, as it is working with angular-translate so far
So far I could not find an elegant solution for this requirements. Thanks for any help, tips or alternative solutions.
Translate your website content to any language Just go to https://translator.smartcat.com/, type in your URL, select the languages and see your main page translated. It's simple: Automatically translate individual pages or your entire website into multiple languages.
You could build a custom asynchronous loader as describe here.
You could set data
below by combining languages.
var app = angular.module('myModule', []);
app.config(function ($translateProvider) {
$translateProvider.useLoader('customLoader', {
// if you have some custom properties, go for it!
});
});
app.factory('customLoader', function ($http, $q) {
// return loaderFn
return function (options) {
var deferred = $q.defer();
// do something with $http, $q and key to load localization files
var data = {
'TEXT': 'Fooooo'
};
return deferred.resolve(data);
// or
return deferred.reject(options.key);
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With