ng-show with translate-values

Subject of the issue

Sorry if this has already been shown, but I can’t find it anywhere.

I’m using directives (ng-show, ng-hide, ng-if, etc) in translate strings, and it’s not working for me. I’m using translate-compile.

Your environment

• version of angular-translate 2.15.2
• version of angular 1.5.3
• which browser and its version Chromium | 68.0.3440.75 (Official Build) (64-bit)

Steps to reproduce

Run the plunkr

Expected behaviour

I should see “Variable is 1.2.3.”

Actual behaviour

Even when variable is set, Variable is missing! appears

[knalli]

@charlie-ablett You have to escape the interpolation '<span ng-show="variable">…' => '<span ng-show="\'{{variable}}\'">…'.

See also working demo: https://plnkr.co/edit/64C3QrKJJGZ9KKhoRvZs?p=preview

The reason for this: translate-compile only compiles the translation which means basically you have access to the actual current context (scope). Said this, <span ng-show="app.someVariable"> would work, however, that would not be probably useful.

The translate-values aren’t the scope of the compilation interpolation, but of the translation interpolation (one step before).

In a nutshell: The interpolation step must render the result (which means it will not work with complex structures because of serialization) and the result of this must be escaped probably for AngularJS.

variable = 'test'

// translation interpolation of '<span ng-show="\'{{variable}}\'">'
<span ng-show="\'test\'">

// AJS template interpolation of the string above (no access to the values any more)
<span ng-show=truthy>

[charlie-ablett]

@knalli Thanks for your attention so far. On my project and on the plunkr above (https://plnkr.co/edit/Pacl7EXx3dgVrGX2rDYj?p=preview) I’ve updated the version of angular-translate, angular-sanitize and angularjs to latest. The issue persists - would you be able to take look again?

Many thanks.