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

【问题标题】：How to set a native attribute from AngularJS directive?如何从 AngularJS 指令设置本机属性？
【发布时间】：2013-08-15 15:38:03
【问题描述】：

我想编写类似于以下内容的 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 拦截器查找以“静态”开头的任何路径，并将其替换为静态服务器的域。很简单。

【问题讨论】：

<a ng-href="{{fullPath}}img.png"> 和 <img ng-src="{{fullPath}}img.png"> 怎么样？这需要在控制器中定义fullPath。
我希望在指令中定义 fullPath。
该指令不能在 href 或 src 的值内使用。
但在顶部的docs.angularjs.org/guide/directive 上有示例<span class="my-dir: exp;"></span>。他们是怎么做到的？
可以作为类使用。

标签： angularjs angularjs-directive

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

【讨论】：

这很接近，但它在指令中硬编码了“href”。如果我想在 <img src="" 上使用指令怎么办？
@adam0101，定义另一个指令，或者让一个指令更智能地检查标签类型：if(element[0].tagName === "A") { ... } else { ... }。

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

【讨论】：

因此，您实际上做的事情与 Mark 相同，只是将您自己的答案标记为答案。非常好。
@Blackunknown，因为他的回答没有回答我的问题。我特别指出无法提前知道属性名称，但他将其硬编码。我赞成他的回答，因为它有帮助，但将我的答案标记为答案，因为它回答了我的问题。
在我看来他还是给了你答案。您所做的只是添加一个变量，而不是对其进行硬编码。人们在这里给出的很多答案最终都不会是你想要的 100%。再加上差异是如此之小。
随便，对我来说都无所谓。我只是想下一位访问者会希望看到最能回答问题的答案。

【解决方案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;
  };
});

【讨论】：

我真的很喜欢这种方法。我可能会在我的下一个项目中这样做。我假设如果您需要以编程方式执行此操作，那么您可以使用 $filter('fullPath')('images/img.png') 吗？
是的，这也是一个优势。