Question

我想写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"}，然后使用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;
  };
});

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

3 个答案: