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

Question

我想写HTML类似于:

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

并且有一个名为"sharedasset"的指令,它获取完整路径img.png并设置属性的值,而指令不知道属性名称提前是什么.这可能吗？

更新

自从我最初发布这个以来,Angular已经有了一些改进,我想我会分享我现在所做的事情.在HTML中,我使用Guido Bouman的答案来创建一个过滤器,现在使用Angular的bind一次特征,这使得它成为我认为的最佳选择.

但是在JS代码中,而不是在任何地方注入$filter和我的globalVars常量,现在我只是将这个词添加static到静态内容服务器上托管的资产的任何路径,{templateUrl: "static/someTemplate.html"}然后使用Angular HTTP Interceptor查找以"static"并将其替换为静态服务器的域.非常简单.

Answer 1

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

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);
            }
        },
    }
});

我不知道你从哪里来fullPathUrl,所以我在链接功能中硬编码.

Answer 2

我不希望指令关心属性名称是什么,所以这就是我最终做的事情:

<a shared-asset="images/img.png" attr="href">test</a>
<img shared-asset="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);
        }
    };
});

更新:我将其更改为默认为"src"属性,因为图像将是最常见的场景.

Answer 3

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

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

过滤器:(假设你有一个全局filters模块)

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