17

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

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

并且有一个名为“sharedasset”的指令，它可以获取完整路径img.png并设置属性的值，而该指令无需提前知道属性名称是什么。这可能吗？

更新

自从我最初发布这篇文章以来，Angular 已经有了一些改进，因此我想我会分享我现在所做的事情。在 HTML 中，我使用 Guido Bouman 的答案，即创建一个过滤器，现在有了 Angular 的一次绑定功能，这使它成为我认为的最佳选择。

不过，在 JS 代码中，不是在任何地方注入$filter和我的globalVars常量，现在我只是将单词static添加到托管在静态内容服务器上的资产的任何路径中，例如{templateUrl: "static/someTemplate.html"}，然后使用 Angular HTTP 拦截器来查找以开头的任何路径“静态”并将其替换为静态服务器的域。很简单。

4

3 回答 3

57 
<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，所以我在链接函数中对其进行了硬编码。

于 2013-08-13T21:22:33.337 回答
9

我不希望指令关心属性名称是什么，所以这就是我最终要做的：

<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”属性，因为图像将是最常见的场景。

于 2013-08-13T22:39:25.263 回答
8

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

<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;
  };
});
于 2014-12-08T13:02:48.340 回答