Directive inside a angular-translate translation

Question

I'm using angular-translate for i18n and want to use a directive inside a translation:

var translations = {
  TEST_1: 'Hello from <a href="/test">Test</a>',
  TEST_2: 'Hello from <user></user>'
};

app.directive('user', function() {
  return {
    template: '<a href="/test">Test</a>'
  };
});

Full plnkr example: http://plnkr.co/edit/jCCcvx7IEaAYUwyaQ7uH?p=preview

So

<p translate="TEST_1"></p>
<p translate="TEST_2"></p>

should be the same. The first (without directive) works, the second doesn't. It transcludes <user></user>, but Angular doesn't seem to be aware of it and doesn't do its directive magic.

Answer 1

Try to use the translate-compile directive:

<p translate="TEST_2" translate-compile></p>

From the docs:

Starting with version 2, the translation itself can be post processed in context of the current scope (using $compile). This means any directive used in a translation value itself will now work as expected.