angular-translate link not working

Question

I can't make a link to another language with angular-translate.

var translations = {
  "en": {
    "HELLO": "hello",
    "ORANGE": "orange"
  },
  "fr": {
    "HELLO": "salut",
    "ORANGE": "@:en.ORANGE"
  },
};

See the following plunker.

It displays "en.ORANGE" instead of "orange".

For reference, see the documentation, section "Shortcuts and Links".

Answer 1

The NAMESPACE in the documentation refers to the one within the same language.

In your plunker, you have this:

var translations = {
  "en": {
    "HELLO": "hello",
    "ORANGE": "orange"
  },
  "fr": {
    "HELLO": "salut",
    "ORANGE": "@:en.ORANGE"
  },
};
$translateProvider
  .translations('en', translations['en'])
  .translations('fr', translations['fr'])

When you set .translations('fr', translations['fr']), you have this as the namespace for your French language:

{
  "HELLO": "salut",
  "ORANGE": "@:en.ORANGE"
}

And whenever angular-translate searches for en.ORANGE, it searches within the above object.

The feature of using the translation from other language is not implemented (yet). Taking a look at the source code for the angular-translate, there's this bit of code:

if (translation.substr(0, 2) === '@:') {
          getFallbackTranslation(langKey, translation.substr(2), interpolateParams, Interpolator)
            .then(deferred.resolve, deferred.reject);
        } else {...}

Whenever you have the @: chars, it does not change the langKey, meaning it will search for the translation in the current language's translation dict.

Currently your plunker works fine. I've made a fork, to show that it's working with links within a namespace. See where from GREETING takes its value.