在 AngularJS 的 ng-include 中使用外部 url答案

【问题标题】：Using external url in ng-include in AngularJS在 AngularJS 的 ng-include 中使用外部 url
【发布时间】：2014-06-15 13:15:27
【问题描述】：

我在 AngularJS 中遇到问题，需要一些指示。

我有一个要嵌入外部 URL 的视图（例如 http://www.w3schools.com）。嵌入的 html 页面应该像普通的 html 页面一样响应点击和触摸等事件。

我已使用 ng-include 指令来使其正常工作。

这是一个代码sn-p：

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

如果我加载外部 html，我会加载外部网页，但页面内的所有链接都已损坏。如果我点击加载页面内的任何链接，所有链接现在都指向 localhost 而不是外部 url。

我该如何解决这个问题？

提前致谢！

【问题讨论】：

您好，如果是跨域访问问题，请告诉我如何解决。
链接指向本地主机，因为链接是相对的而不是绝对的 url，除非该页面上的所有链接都具有完整的 url w3schools.com/about 而不是 /about，否则它们将不起作用。它将在您的服务器上查找 /about。这不是 include 的使用方式，但如果您确实想以这种方式使用它，那么您需要创建一个自定义指令，首先执行 url 的 $http.get ，然后查看 html 并替换所有链接绝对来自他们来自的领域。
感谢您的意见。有没有其他方法可以在我的页面中嵌入在线 html 而无需更改 url？我尝试了 iframe 方法，但在 iframe 中，触摸不起作用。
没有 iframe 是保持它与域的关联并且不必重新处理 url 的唯一方法...构建一个可以抓取 html 并重写链接的指令不会是结束世界的。你可以做到的。

【解决方案1】：

听起来您真的只想在视图中托管外部站点，然后您应该将其链接到 iframe 中。

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

如果您希望发生一些神奇/动态的事情，您将需要解析内容并重写 url、附加处理程序等。您的 ng-include 无法按预期工作的原因是因为它只读取该内容的内容url 并将其嵌入到您的视图中“好像”它只是您制作的模板（包括角度标记）并且出于某种原因想要在外部托管。

【讨论】：