如何从AngularJS指令设置本机属性？

我想编写类似以下内容的HTML：

<a href="sharedasset: img.png">test</a>
<img src="sharedasset: img.png"/>

还有一个名为“sharedasset”的指令，它获取到

img.png

的完整路径，并设置属性值，而该指令事先不知道属性名称。这可能吗

更新

自从我最初发布这篇文章以来，Angular已经有了一些改进，因此我想我会与大家分享我现在所做的。在HTML中，我使用Guido Bouman的答案，即创建一个过滤器，现在使用Angular的bind once功能，我认为这是最好的选择

但是在JS代码中，我没有到处注入

$filter

和我的

globalVars

常量，而是在静态内容服务器上托管的资产的任何路径前面加上

static

，比如

{templateUrl:“static/someTemplate.html}

然后使用角度HTTP拦截器查找以“static”开头的任何路径，并将其替换为静态服务器的域。很简单

<a full-path="img.png">test</a>
<img full-path="img.png">

---

我不知道从何处获取

fullPathUrl

，因此我在link函数中对其进行了硬编码。

我不希望该指令关心属性名称，因此我最终做了以下工作：

app.directive('fullPath', function() {
    return {
        link: function(scope, element, attrs) {
            var fullPathUrl = "http://.../";
            if(element[0].tagName === "A") {
                attrs.$set('href',fullPathUrl + attrs.fullPath);
            } else {
                attrs.$set('src',fullPathUrl + attrs.fullPath);
            }
        },
    }
});

---

更新：我将其更改为默认的“src”属性，因为图像将是最常见的场景。

自定义过滤器比指令更适合这种情况：

<a shared-asset="images/img.png" attr="href">test</a>
<img shared-asset="images/img.png" />

---

那么

和

呢？这需要在控制器中定义

fullPath

。但我希望在指令中定义fullPath。该指令不能在href或src的值内使用。但在其顶部有示例

。他们是怎么做到的？它可以用作一个类。这很接近，但指令中有“href”硬编码。如果我想在

？@adam0101上使用该指令，定义另一个指令，或者使一个指令更智能地检查标记类型：
if（element[0]。tagName==“A”）{…}else{…}
，那么您实际上做了与Mark相同的事情，但将自己的答案标记为答案。很好，因为他的回答没有回答我的问题。我特别指出，属性名无法提前知道，但他对其进行了硬编码。我对他的答案投了更高的票，因为它有帮助，但我把我的答案标为答案，因为它回答了我的问题。在我看来，他仍然给了你答案。您所做的只是添加一个变量，而不是硬编码。人们在这里给出的很多答案最终都不是你想要的100%。再加上差别是如此之小。不管怎样，这对我来说并不重要。我只是觉得下一位访客会希望看到最能回答问题的答案。我真的很喜欢这种方法。在我的下一个项目中，我可能会这样做。我假设，如果您需要以编程方式执行此操作，您可以使用
$filter（'fullPath'）（'images/img.png'）
，然后呢？是的，这也是一个优势。
app.directive('sharedAsset', function (globalVars) {
    return {
        restrict: "A",
        scope: {
            attr: "@attr"
        },
        link: function (scope, element, attrs) {
            var fullPath = globalVars.staticWebsite + "/app/styles/main/" + attrs.sharedAsset + "?build=" + globalVars.buildNumber;

            attrs.$set(scope.attr || "src", fullPath);
        }
    };
});

<a href="{{'images/img.png' | fullPath}}">test</a>
<img src="{{'images/img.png' | fullPath}}" />

angular.module('filters').filter('fullPath', function(globalVars) {
  return function(url) {
    return globalVars.staticWebsite + "/app/styles/main/" + url + "?build=" + globalVars.buildNumber;
  };
});