translate-cloak not cloaking

[itonics-tbeauvais]

I am seeing a flash of the translation key before it is asynchronously replaced. I have tried translate-cloak but it doesn't seem to be working. Any thought?

Thanks and this module is very much appreciated!

[mastix]

+1 - same issue here.

[knalli]

Could you please elaborate this a bit more?

What did you have tried? What is your configuration? Can you show a working example of non-working?

[tspaeth]

Just as a side note to extend the question: Where is translate-cloak set / attached? On a div element or on the body element?

[mastix]

Ok, fixed it... sort of. Let me clarify:

I've added it to the body-tag and added the translate-cloak class (opacity: 0). That works fine... The initlal page loads without flickering! But when I use ngRoute to display another part of the page (SinglePageApplication), then the new part (new controller) will NOT show the translated elements as the translateFinishedEvent (or whatever that event is called) is not being triggered (I guess).

I've changed the translate-cloak CSS class to use "background-color: red", and now I can see that when the whole page loads... everythings is cool and cloaking works (no red parts on the page). As soon as I click on my link (that loads "/#/" (so actually the same page(!), but with ngRoute => SinglePageApplication)) the translate cloak class does not get removed (so every translated text stays red in this case!)! So I guess I have to pass the translateprovider to each controller so that SPA works, am I right?

In short: translate-cloak works, but as soon as I use ngRoute to replace a section of the page (with a new controller), the controller view's translate-cloak classes do not get removed.

Edit: A $translate.refresh() in the controller seems to trigger that event. Is that the solution?

Regards,

Sascha

[itonics-tbeauvais]

+1 to @mastix , couldn't have said it better myself. Although.. it is in the initial page load load and not an ngRoute redirect.

The problem I am seeing is that ngCloak isn't working at all. I see the translation key flicker, then it loads the strings properly. translate-cloak has no effect.

Isn't the body not to be shown until the strings are loaded? I know this will create an initial delay for the user but we can cache later.

[knalli]

Are you using the partial loader?

[tspaeth]

is it ngCloak we are now talking about or just and only translate-cloak? :-)

[itonics-tbeauvais]

You are right @tspaeth, I meant translate-cloak.

I am not using a partial loader for the initial page being loaded (login) and that is where the issue is more apparent.

[tspaeth]

So does one of you @mastix or @itonics-tbeauvais have a plunker or similar as a full test case?

[itonics-tbeauvais]

Running at the end of the Sprint, I will have to add one in a day or two.

[dietergeerts]

Hi, I also see this issue. And I see the exact same as @mastix: On initial load everything is fine, but when loaded with ngRoute (/#/), the translation keys are visible. Are there any good workarounds in the maintime?

[amamf]

translate-cloak doesn't work for me, since, in a way, it is implemented incorrectly, I'm wondering why it's not implemented by analogy with a native ng-cloak directive. The problem with the current implementation is that if some text needs to be translated and it resides e.g. in index.html, then in this case translation keys will not be hidden until angular is initialized and translate-cloak can come into play. In fact this directive should have been implemented as a native one, so that you can add the translate-cloak to target elements as a class rather than as an attribute. In this case it would have worked properly. At the moment, in order to make it work I need to add both the translate-cloak class and the translate-cloak attribute. The simplest solution to that issue would be just allow to declare the translate-cloak directive as a class.

[itonics-tbeauvais]

Here here! Any update?

[knalli]

At the moment, in order to make it work I need to add both the translate-cloak class and the translate-cloak attribute. The simplest solution to that issue would be just allow to declare the translate-cloak directive as a class.

I don't understand the issue. But yes, the attribute way should work too. Perhaps we had missed the default (because there is actually NO restriction, although it is documented).

As you can see here: http://plnkr.co/edit/PTVj8vBMFRl4UmHp8uTM?p=preview

• Single attribute works
• Explicit key in attribute works
• however: class does not work

Speaking of making the thing easier, it would be a good improvement allowing class directives.

But that (class attribute) is actually not the topic of this issue.

The problem with this issue is: nobody has made a working example (proof of concept). I'm running a larger SPA with ui-route without these problems and we could not understand the problem. After a while we close stale issues.

So, well. However, it is correct that the directive on instantiation is not looking for the state of translations. And yes, it is correct that a $translate.refresh() will invoke implicitly an event which will solve this problem". At least as a workaround, this is fine. This issue is a bug and will be addressed..

[knalli]

fyi: #1175 in canary resolved.