如何在不编辑 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 sn-ps，它们需要包装在编译其内容的指令中：

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 的指令，一种方法是“修复”sn-p：

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

然后像这样启动指令：

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

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

Answer 2

这部分可以通过使用 ng-src 来实现插值。

例子：

在您各自的控制器中...

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

你的文档最终会变成这样 ..

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

不太明白为什么你不能触摸 dom 但上面的原型可以放在指令中，唯一的其他选择是获取用户上传的文件名并构建你自己的带有该文件名的路径名，然后将其附加回 dom。

Answer 3

你可以使用.getElementsByTagName('img')获取所有img标签

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;

如果你想改变所有img标签中的src，你可以使用for循环。

Answer 4

您可以在控制器中添加字段

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

在你的 html 中

<img src="image.src"/> 

而且你可以随时更改图片源

Answer 5

如果您无法编辑 html 文件，那么添加角度指令会很棘手。你有没有想过使用 jQuery 来操作img 源代码？