angular js指令来替换img标记上的ng-src

Question

目前我有一个图像标签，我需要在其中进行JavaScript替换。我在网上查看，我读到了一些人关于使用指令来实现这一点的想法，但还没有找到一个可以帮助我的例子。

我当前的设置如下：

HTML:

<img ng-src="{{day.Item.Logo}}" item-logo>

day.Item.Logo只是一个正在返回的字符串，看起来像这样。

http://domainnamehere.com/image%s%s.png

以及我目前的指示。

    myApp.directive("itemLogo", function() {
        return function(scope, element, attrs) {
           attrs.ngSrc = attrs.ngSrc.replace("%s", "24");
           attrs.ngSrc = attrs.ngSrc.replace("%s", "24");
        }
    });

我知道我在我相信的指令中显然做错了什么，但我不确定。本质上，我想用"24"替换"%s"，并在它请求获取/加载图像之前将其返回到视图。

Answer 1

我认为问题是按角度进行指令处理的顺序。当它编译你的指令时，ng-src可能已经被处理了。我会在将url放入模型之前修改控制器中的url。

另一种方法是对ng-src进行函数调用，以修改url。

ng-src='{{formatUrl(day.Item.Logo)}}'

这是一个JSBin