I'm developing an AngularJS application and I have this paragraph in the HTML:
<p id="CEBM_HELP_DETAILS_CHANGE_POINTS_BLURB" class="section-paragraph justify-paragraph margin-bottom-30">
This is my paragraph (see <a href="" ng-click="followLink('best-fit-line', 'charts')">Best Fit Line</a>). This is more of my paragraph.
</p>
The paragraph renders fine and the link works properly.
However, now I need to move the paragraph to our resx file so that it can be translated to other languages. So now it's here:
<data name="CEBM_HELP_DETAILS_CHANGE_POINTS_BLURB" xml:space="preserve">
<value>
This is my paragraph (see <a href="" ng-click="followLink('best-fit-line', 'charts')">Best Fit Line</a>). This is more of my paragraph.
</value>
</data>
Normally, we would take the contents of the resx file and inject it into the DOM through interpolation and piping it through a 'translate' pipe, like this:
{{ 'CEBM_HELP_DETAILS_CHANGE_POINTS_BLURB' | translate }}
But in this case, because the paragraph contains HTML elements (i.e. <a href="" ng-click="followLink('best-fit-line', 'charts')">Best Fit Line</a>), it needs to render these elements properly, and injecting it like this doesn't do so. I end up seeing <a>...</a> on the page.
So instead I'm trying to do this:
function injectLanguageItem(itemKey) {
var text = $filter('translate')(itemKey);
var container = document.querySelector('#' + itemKey);
container.innerHTML += text;
}
injectLanguageItem('CEBM_HELP_DETAILS_CHANGE_POINTS_BLURB');
This works as far as rendering HTML elements is concerned, but now when I click on the hyperlink, it doesn't call the followLink() function; instead, it refreshes the page.
The strange thing is, the DOM looks exactly the same in each case when I inspect it:
This is how it looks when I place the paragraph directly into the HTML and it's also how it looks when I inject it from the resx file.
Does anyone know why my link is not working when I inject it? Does it have anything to do with ng-click in that Angular doesn't get a chance to process the link when it's injected? Is there another approach to resolving this problem that I'm not thinking about?
