Translating multiple translationIds using AngularJS's translation directive

Question

I'm using PascalPrecht's AngularJS Translation module.

---

{
    APP.WELCOME: 'Welcome',
    APP.USER: 'user'
}

<span translate>{{'APP.WELCOME'}}</span> <span translate>{{'APP.USER'}}</span>

Works fine. It outputs Welcome user.

---

Now, is it possible to combine two translationId's in one element? I've tried multiple things:

<span translate>{{'APP.WELCOME'}} {{'APP.USER'}}</span>

<span translate>{{'APP.WELCOME APP.USER'}}</span>

<span translate>{{'APP.WELCOME' + 'APP.USER'}}</span>

<span translate>{{'APP.WELCOME'; 'APP.USER'}}</span>

<span translate>{{['APP.WELCOME','APP.USER']}}</span>

but nothings seems to work.

Any suggestions? Is this even possible?

Answer 1

Try using two double brackets elements inside a single <span>, and translate as a $filter:

<span>{{'APP.WELCOME' | translate }} {{ 'APP.USER' | translate }}</span>

It should work...