Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular-Translate: Specify language per translated element

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">&times;</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.

like image 960
jbandi Avatar asked Mar 03 '15 17:03

jbandi


People also ask

How do I translate a website into multiple languages?

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.


1 Answers

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);
    };
});
like image 59
Harold Ship Avatar answered Oct 16 '22 12:10

Harold Ship