Search code examples
javascriptangularjsangular-translate

angular-translate translation object with some equal translations


I'm using angular-translate to make a web application multilanguage. Everything works fine, and by now I have structured my translations so that I have:

$translateProvider.translations("en", {
    "LANGUAGE": {
        "ENGLISH": "english",
        "GERMAN": "german",
        "ITALIAN": "italian",
        "FRENCH": "french",
    }
});

Let's say I want to add BUTTONS.ENGLISH with the same definition of LANGUAGE.ENGLISH. Is it possible to reference it in some way like BUTTONS.ENGLISH = this.LANGUAGE.ENGLISH?

$translateProvider.translations("en", {
    "LANGUAGE": {
        "ENGLISH": "english",
        "GERMAN": "german",
        "ITALIAN": "italian",
        "FRENCH": "french",
    },
    "BUTTONS": {
        "ENGLISH": this["LANGUAGE"]["ENGLISH"] // ???
    }
});

Solution

  • The way you are trying to do is not possible because of javascript scope issues but you can always use interpolation inside a translation to call another translation like the following example.

     "ENGLISH": "{{ 'LANGUAGE.ENGLISH' | translate }}"
    

    This way you can guarantee that your key will correspond to another key value which maybe can make it easier to maintain.

    Full code:

    $translateProvider.translations("en", {
        "LANGUAGE": {
            "ENGLISH": "english",
            "GERMAN": "german",
            "ITALIAN": "italian",
            "FRENCH": "french",
        },
        "BUTTONS": {
            "ENGLISH": "{{ 'LANGUAGE.ENGLISH' | translate }}"
        }
    });
    

    FURTHER NOTE ABOUT PERFORMANCE ISSUES: I think it won't cause any huge performance issues despite that it's more expensive than a plain string, but it would be the same cost that using variable replacement, but yet, more expensive than a plain string (I've tested and normally is 25% less expensive than interpolated strings), so avoid using it in large scale.