Nodes with children are not translated in IE8

[scomma]

Hi, thanks for an excellent library. I'd like to report an issue I found with IE8, tested against the latest stable versions of angular (1.2.15) and angular-gettext.

Normally sometimes you put the translate directive on an element which has child elements, and all of it would be translated in one chunk. For example:

<p translate><b>Note:</b> keep out of reach of children</p>

Both gettext_extract and the localization engine would handle this without a hitch in modern browsers. Under IE8, it refuses to find the correct translation. If debug mode is turn on, a [MISSING] tag is prepended to the output.

So far, I have taken a wild guess and sneaked into the po file and changed the embedded tags to capital form, i.e.

msgid "<B>Note:</B> keep out of reach of children"

and this seems to work in simple phrases but not in complex cases where there are more tags. But more importantly, this breaks the translation that otherwise works in all other browsers, so it's not an acceptable fix.

Do you have an idea of what could have caused the issue, and how hard it would be to workaround?

[maxpeterson]

I think I have encountered the same problem. In IE8 all tags are transformed to upper case. As you pointed out @scomma capitalising the tags will fix the translations for IE8, however this will break other browsers, unless you also change the actual templates to include capitalised tags (which sounds like a bad idea to me).

I have a working fix that uses angular.element to transform the strings keys when they are set in setStrings: key = angular.element('<span>' + key + '</span>').html()

Currently I have this working in an version 1.0.1 as this is the version we are using as the latest version has some other issues in IE8.

I will create a fork with the fix over the weekend or next week.

[rubenv]

Should work now. Thanks @maxpeterson.