Как установить собственный атрибут из директивы 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 и my globalVars во всем мире теперь я просто добавляю слово static к любому пути ресурса, размещенного на сервере статического контента, например {templateUrl: "static/someTemplate.html"} а затем используйте HTTP-перехватчик Angular для поиска любого пути, который начинается со "статического" и заменяет его доменом для статического сервера. Очень просто.

Ответы

Ответ 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, поэтому я жестко запрограммировал его в функции ссылок.

Ответ 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", поскольку изображения будут наиболее распространенным сценарием.

Ответ 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;
  };
});