angularjs - 如何通过指令更改图像源属性

Question

我有以下图像标签:

<img src="default.png" data-new-image/>

newImage是我定义的指令，它将从服务器获取图像(基于某些标准)，并且在计算和获取图像时，我显示了 default.png 图像文件。

在这个指令中，我定义了 link功能如下:

return {
    link: function (scope, element, attrs) {
        //My custom logic here to determine which image to show
        //and then fetch from the server
        //After HTTP request, assigning image to image source
        attrs.src = "image_fetched_from_server.png";
    }
};

但这不会更新图像 src 属性。我可以清楚地看到获取的图像和 console.log(attrs)分配图像后显示源属性已更新为新图像。但是浏览器中的 DOM 检查器没有显示源代码的变化——它仍然显示 default.png

我在这里使用指令而不是 Controller - 我知道我可以使用 Controller 并使用 ng-src但是我在多个 Controller 上都有这种逻辑，并且指令是我拥有的最佳选择。如何更改图像标签的来源？我想知道如何 ng-src可以？

Answer 1

我找到了原因。

要在属性中设置值，我需要使用 attrs.$set(attribute_name, value) .

因此，我替换了 attrs.src与 attrs.$set('src', 'image_fetched_from_server.png');它奏效了!