Why does my link not work when injected with Javascript?

23 Views Asked by At

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 &lt;a href="" ng-click="followLink('best-fit-line', 'charts')"&gt;Best Fit Line&lt;/a&gt;). 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:

enter image description here

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?

0

There are 0 best solutions below