javascript - 如何在不编辑 HTML 文件的情况下使用 AngularJS 更改 HTML 中的 img src？

Question

我有一个使用 AngularJS 完成的网站，所有 HTML 代码都是从数据库加载的。所以我们不能编辑代码。它在应用程序运行时加载。但是我们可以编辑 JavaScript 文件。所以我必须编辑 img src 链接。实际上我必须向它添加一些主要的 url 部分。我怎样才能做到这一点 ？

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

这是必须要做的。 img 标签中也没有 id。我们可以使用 Angular 指令吗？我们不能在 HTML 文件中添加任何内容。也没有指令名称。请帮我解决这个问题。真的卡在这里了。

更新:无法更改 html 源的原因是因为它来自外部源并且是用户生成的。用户上传包含相关链接的文本，这些链接在静态查看页面时有效。然而，当我们将文本加载到我们的 Angular 站点时，相关链接不再有效，因为 Angular 代码和模板与用户内容和图像位于不同的主机上。

我们希望直接在 angular.js 中找到解决方案，而不是使用较低级别的 javascript 或 jquery 来操纵 DOM。

Answer 1

尽管讨论创建 img 是否明智指令，解决问题的实际指令如下所示:

app.directive('img', function() {
  return {
    restrict: 'E',
    replace: false,
    link: function(scope, elem, attr) {
      if (attr.src.slice(0, 7) !== "http://" && attr.src.slice(0, 8) !== "https://") {
        attr.$set("src", "http://demo.com/+ attr.src);
      }
    }
  };
});

本comment讨论的递归问题来自尝试使用模板替换整个 <img>标签而不是仅仅改变 src值

此外，为了将该指令应用于动态加载的 html 片段，它们需要被包装在编译其内容的指令中:

app.directive('dynamic', function($compile) {
  return {
    restrict: 'A',
    replace: false,
    transclude: true,
    link: function(scope, ele, attrs) {
      return scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

像这样应用:

<div dynamic="content"></div>

哪里content是您范围内的变量，其中包含用您的 <img> 剪切的动态 html标签。

---

如果你想避免一个名为 img 的指令，一种方法是“修复”代码段:

content.replace(/<img /g, "<img customimg ")

然后像这样启动指令:

app.directive('customimg', function() {
  return {
    restrict: 'A',
...

在这里使用替换似乎很粗糙，但我想不出其他方法。欢迎提出改进答案的建议!