current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

I have a website done using AngularJS and all the HTML code is loading from database. So we cannot edit the code. It's loading when the application running. But we can edit the JavaScript files. So I have to edit the img src link. Actually I have to add some main url part to it. How can I do this ? 

<img src="/img/logo.png"/> to <img src="http://demo.com/img/logo.png"/>

This is how this has to be done. No id in the img tag too. Can we use Angular Directives ? And we cannot add anything in the HTML files. No directive name too. Please help me on this. Really stuck in here.

update: the reason the html source can't be changed is because it is coming from an external source and is user generated. the users upload text that contains relative links that work when the pages are viewed statically. however when we load the text into our angular site, relative links no longer work, because the angular code and templates are on a different host than the user content and images.

we would like to find a solution in angular.js directly, without resorting to manipulating the DOM using lower level javascript or jquery.

share|improve this question
    
In the controller itself when you generating the html add the base url in front of image path. – Rohit Jindal May 22 at 6:06
    
i believe this question is relevant to evaluate directives in the loaded html: stackoverflow.com/questions/20623118/… – eMBee May 23 at 16:02
up vote 0 down vote

If you're unable to edit the html file then it would be tricky to add angular directives. Have you thought about using jQuery to manipulate img source?

share|improve this answer
    
Hey, can we create a directive named "img" ? So we don't need to add directive name on HTML file.... no ? And also can't we try overriding img tag using Angular? – chanu1993 May 22 at 6:42
    
Even if you would have created an Angular directive named img (which is not recommended) you would have to place it in your html file. Look at jQuery examples for handling this issue. – AranS May 22 at 6:51
    
why is using an img directive not recommended? and what would have to be in the html file? the <img> tag is obviously in there already. – eMBee May 23 at 9:19
    
When building directives it's better to prefix it with your app identity, for example: image directive will be called mb-img, this way you will be able to differentiate between your directives and the html tags. – AranS May 23 at 11:05
    
In addition, you said you cannot alter the HTML file, that means that you cannot place directives in there. Therefore, the best way to manipulate the DOM (your image source in this case) would be to use jQuery. Let me know if you'd like a simple example. – AranS May 23 at 11:07
up vote 0 down vote

in your controller you can add field 

$scope.image = {src:"your url to the imge"};

and in your html

<img src="image.src"/>

and you can change the image src anytime

share|improve this answer
    
that doesn't work because the html source can't be changed. – eMBee May 23 at 9:18
up vote 0 down vote

You can use .getElementsByTagName('img') to get all img tags

var imgs = document.getElementsByTagName('img');
var src = imgs[x].getAttribute("src");    //x is the index of img tag
imgs[x].src = 'http://demo.com' + src;

If you want to change the src of all img tags, you can use for loop.

share|improve this answer
up vote 0 down vote

Part of this can be accomplished using ng-src to utilize interpolation .

Example :

In your respective controller ...

$scope.linkappend = 'http://demo.com';

in the end your document will end up like this ..

 <img ng-src="{{linkappend}}/img/logo.png"/>

Didn't really understand why you are not able to touch dom but the prototype above can be placed in a directive and the only other option is to grab the name of the file that the user uploads and build your own path name with the name of that file, then append it back to the dom.

share|improve this answer
    
the user uploads the html content, including the img links inside. – eMBee May 24 at 3:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.