How can I use special characters in angular direct

Question

I would like to use strings including german characters (Ä, Ö, Ü) in attributes of a custom angularJS directive.

For example:

<my-custom-directive my-label="Lärm" />

Another example is the ui.bootstrap.tabs directive:

<tabset>
   <tab heading="Lärm"> content ... </tab>
   <tab heading="Second Heading"> content ... </tab>
</tabset>

This results in a tab with heading "L�rm". Any ideas?

Answer 1

Usually in a good editor you can change the document encoding type, the document is saved in. try to set it to iso-8859-1/utf-8 and save/upload again.

Next bet would be to change the encoding of the html-output with

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

Umlauts often is trial & error...

Answer 2

Use escape characters for javascript.

<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tbody><tr>
  <th>Display</th>
    <th>Friendly Code</th>
    <th>Numerical Code</th>
    <th>Description</th>
</tr>
<tr class="grey">
	<td class="codes">Ä&nbsp;</td>
	<td class="codes">&amp;Auml;</td>
	<td class="codes">&amp;#196;</td>
	<td class="codes">Capital A-umlaut</td>
</tr>
<tr>
	<td class="codes">ä&nbsp;</td>
	<td class="codes">&amp;auml;</td>
	<td class="codes">&amp;#228;</td>
	<td class="codes">Lowercase a-umlaut</td>
</tr>
<tr class="grey">
	<td>É</td>
	<td>&amp;Eacute;</td>
	<td>&amp;#201;</td>
	<td>Capital E-acute</td>
</tr>
<tr>
	<td>é</td>
	<td>&amp;eacute;</td>
	<td>&amp;#233;</td>
	<td>Lowercase E-acute</td>
</tr>
<tr class="grey">
	<td class="codes">Ö&nbsp;</td>
	<td class="codes">&amp;Ouml;</td>
	<td class="codes">&amp;#214;</td>
	<td class="codes">Capital O-umlaut</td>
</tr>
<tr>
	<td class="codes">ö&nbsp;</td>
	<td class="codes">&amp;ouml;</td>
	<td class="codes">&amp;#246;</td>
	<td class="codes">Lowercase o-umlaut</td>
</tr>
<tr class="grey">
	<td class="codes">Ü&nbsp;</td>
	<td class="codes">&amp;Uuml;</td>
	<td class="codes">&amp;#220;</td>
	<td class="codes">Capital U-umlaut</td>
</tr>
<tr>
	<td class="codes">ü&nbsp;</td>
	<td class="codes">&amp;uuml;</td>
	<td class="codes">&amp;#252;</td>
	<td class="codes">Lowercase u-umlaut</td>
</tr>
<tr class="grey">
	<td class="codes">ß</td>
	<td class="codes">&amp;szlig;</td>
	<td class="codes">&amp;#223;</td>
	<td class="codes">SZ ligature</td>
</tr>
<tr>
	<td class="codes">«</td>
	<td class="codes">&amp;laquo;</td>
	<td class="codes">&amp;#171;</td>
	<td class="codes">Left angle quotes</td>
</tr>
<tr class="grey">
	<td class="codes">»</td>
	<td class="codes">&amp;raquo;</td>
	<td class="codes">&amp;#187;</td>
	<td class="codes">Right angle quotes</td>
</tr>
<tr>
	<td class="codes">„</td>
	<td class="codes">&nbsp;</td>
	<td class="codes">&amp;#132;</td>
	<td class="codes">Left lower quotes</td>
</tr>
<tr class="grey">
	<td class="codes">“</td>
	<td class="codes">&nbsp;</td>
	<td class="codes">&amp;#147;</td>
	<td class="codes">Left quotes</td>
</tr>
<tr>
	<td class="codes">”</td>
	<td class="codes">&nbsp;</td>
	<td class="codes">&amp;#148;</td>
	<td class="codes">Right quotes</td>
</tr>
<tr class="grey">
	<td class="codes">°</td>
	<td class="codes">&nbsp;</td>
	<td class="codes">&amp;#176;</td>
	<td class="codes">Degree sign (Grad)</td>
</tr>
<tr>
	<td class="codes">€</td>
	<td class="codes">&amp;euro;</td>
	<td class="codes">&amp;#128;</td>
	<td class="codes">Euro</td>
</tr>
<tr class="grey">
	<td>£</td>
	<td>&amp;pound;</td>
	<td>&amp;#163;</td>
	<td>Pound Sterling</td>
</tr>
</tbody></table>