Directives inside innerHtml

#1

Hi everyone! I’ve been trying to do this without any success and I would like to ask you for help :slight_smile:

The situation is: I received from a WordPress API a json with a couple of posts, and I put the post content in the template like this:

`

{{p.title.rendered}}

`

Everything good until here. BUT my problem is: i’m making a replace in the json like:

this.data[x].content.rendered.replace(/<img/gi, "<img [image-with-zoom] ")

in order to add an attribute that I want to use with a directive. The replace is working fine, but the problem is that the innetHTML didn’t recognize that directive. What can I do to make that work???

The idea I want to reach is use that directive to catch a tap over an image, read it’s source and show the image inside a modal.

Thanks in advance!

Ionic v2 bind html
#2

Short answer: nothing.

Longer answer: see this issue.

#3

Ohhh, that wasn’t the kind of answer I was expecting :cry:
Thanks rapropos!
So, there’s no way to bind a click event in every image inside a block of html that comes from an api?

#4

alealvaro, actually, there’s at least one non-standard way to do that. I’ve had the similar problem with dynamic loading of i18n and solved it with custom pipe. In your case, you can do the following:

  1. Add custom event handler to the block containing the dynamic HTML:
    `<div id=“container” (imageClick)=“imageClicked($event)”>
    {{ html | onclick:‘container’ }}
` 2. Implement custom pipe ('onclick' from above example) that processes the HTML received from server and wraps the images in `` tags with onclick handler: `` 3. Implement handling of this event in component controller: ` @Component(...) class MyComponent { imageClicked(event) { let imgId = event.detail; ... } } `
#5

Create a component seems a good way.

See this link:

#6

Here is an answer