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

我在这里使用指令而不是控制器 - 我知道我可以使用控制器并使用ng-src但我在多个控制器上有这个逻辑，指令是我的最佳选择。如何更改图像标记的来源？我想知道ng-src是怎么做到的？

Answer 1

我找到了原因。

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

因此，我将attrs.src替换为attrs.$set('src', 'image_fetched_from_server.png');并且有效！

Answer 2

ng-src只不过是另一个传递＆＃34;来源＆＃34;属性（或绑定它）给定的指令/无论如何。

那么 - 你想要制作的指令的名称是什么？一种选择可能是包含<img.../>

中的整个image-loader-directive标记

可能发生的另一个问题可能与您的DOM定义src="default.png"而不是src="{{ image_src }}"之类的事实有关。这样，你的指令决定改变image_src的含义 - DOM将刷新，从而从其源头提取正确的图像。

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

2 个答案: