Using external url in ng-include in AngularJS

Question

I have a problem in hand in AngularJS and need some pointers.

I have a view where I want to embed an external url (e.g. http://www.w3schools.com). The embeded html page should respond to events like click and touch like a normal html page.

I have used ng-include directive to get that working.

Here is a code snippet:

    <ion-content>
       <div ng-include src="'http://www.w3schools.com'"</div>
    </ion-content>

If I load the external html, I am getting the external webpage loaded, but all the links inside the page are broken. If I click on any link inside the loaded page, all links point to localhost now instead of the external url.

How can I fix this problem?

Thank in advance!

Answer 1

It sounds like you really just want to host the external site inside your view, and then you should just link it in an iframe.

<iframe src="http://www.w3schools.com"></iframe>

If you want something magic/dynamic stuff to happen, you will need to parse the content and rewrite the urls, attach handlers etc. The reason your ng-include does not work like expected is because it only reads the content of that url and embeds it into your view "as-if" it was just a template you made (including angular markup) and wanted to host externally for some reason.