ng-src not working in ng-bind-html

[Marco]

Hello,

in my controller i'm replacing img urls with urls i get from a database in html fragments that i also get from a database

example

<div>
<p>test</p>
<img src="old/source/image">
<div>

becomes

<div>
<p>test</p>
<img src="new/source/image">
<div>

the new source for the image url is constructed in the controller and a old source is replaced with the new source

this did not work because of the async db operation, therefor i made a scope image variable to receive the value of the src and in the html i put an ng-src, so angular could bind to it

<div>
<p>test</p>
<img ng-src="imagevar">
<div>

in my htm i insert the htm with ng-bind-html (using $sce on the variable)

My problem is that the ng-src="imagevar" doesn't get processed, when i look at the source in my browser i see <img ng-src="imagevar"> instead of the source i need, when i paste the same variable in a

<div>
{{imagevar}}
</div>

it content that needs to get in the src attribute gets displayed ok

where does this go wrong?

thanks

Marco

[Caitlin Potter]

ng-bind-html does not compile the html template, it just sanitizes and renders it. So, directives like ng-src won’t work. You might want to use ngInclude or a router for this functionality instead.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Marco]

OK, thanks for the reply, I will check these options

[Luke Kende]

Are you trying to replace complete blocks of html? Then yes, use ng-include as Caitlin recommends. For ng-src is interpolated not, bound to a variable... the proper way to change the source in your case should be:

<img ng-src="{{imagevar}}">

This is advantageous because you can change, parts of the url only, like if you know it's always the same file name but the directory changes:

<img ng-src="{{current_directory}}/image.png">

[Marco]

Hello Luke

i did an export of a website in a php framework and one of the page items is a text string with html in it, made with a wysiwyg editor in the framework, the others are things like strings with regular text, file id's, numbers, ...

in these chunks of html there is a reference to image files in the form

<img  src="index.php/view_inline_file/1234">

where the 1234 is the file id of the image, i also exported the image database so i can use these file id's

by now i have altered the php export script of the old site so the html would contain 

<img  ng-src="/filesorig/1234">

thinking i could use this route to return the url of the file that is something like "/assets/3578/2456/9345/the_original_filename.jpg" from the api serverside

I tried the route option like Caitlin suggested but when i make a template i still need to use ng-bind-html to include the html block and my ng-src seems to disappear again.

with ng-include i had no luck either, i think i will change my php export code so the html will contain the "/assets/3578/2456/9345/the_original_filename.jpg" instead of the "index.php/view_inline_file/1234", i have lost to much time on this and i think it would make more sense to take care of this in the export so i don't have to worry about it in the new environment. 

thanks for your input

gr

Marco

 

Op woensdag 15 april 2015 07:34:27 UTC+2 schreef Luke Kende: