Как установить собственный атрибут из директивы AngularJS?

Я хотел бы написать HTML, похожий на:

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

И иметь директиву под названием «sharedasset», которая получает полный путь к img.png и устанавливает значение атрибута, при этом директива не знает заранее, какое имя атрибута. Это возможно?

Обновить

Поскольку я изначально опубликовал это, в Angular были внесены некоторые улучшения, и я решил поделиться тем, что я делаю сейчас в результате. В HTML я использую ответ Гвидо Боумана, который заключается в создании фильтра, и теперь с функцией Angular bind Once это делает его лучшим вариантом, на мой взгляд.

Однако в коде JS вместо того, чтобы везде вводить $filter и мою константу globalVars, теперь я просто добавляю слово static к любому пути ресурса, который размещен на сервере статического контента, например {templateUrl: "static/someTemplate.html"}, а затем использую Angular HTTP Interceptor для поиска любого путь, начинающийся со слова «статический», и замените его доменом статического сервера. Очень простой.


angularjs angularjs-directive
person adam0101    schedule 13.08.2013    source источник
comment
Как насчет <a ng-href="{{fullPath}}img.png"> и <img ng-src="{{fullPath}}img.png">? Для этого потребуется определить fullPath в контроллере.   -  person Mark Rajcok    schedule 14.08.2013
comment
Я хочу, чтобы fullPath был определен в директиве.   -  person adam0101    schedule 14.08.2013
comment
Директиву нельзя использовать внутри значения href или src.   -  person Mark Rajcok    schedule 14.08.2013
comment
Но на docs.angularjs.org/guide/directive вверху есть пример <span class="my-dir: exp;"></span>. Как они это делают?   -  person adam0101    schedule 14.08.2013
comment
Его можно использовать как класс.   -  person Mark Rajcok    schedule 14.08.2013

Ответы (3)


arrow_upward
9
arrow_downward

Я не хотел, чтобы директива заботилась о том, как называется имя атрибута, поэтому в итоге я сделал следующее:

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

Update: I changed it to default to the "src" attribute since images will be the most common scenario.

person adam0101    schedule 13.08.2013
comment
Таким образом, вы делаете практически то же самое, что и Марк, но отмечаете свой ответ как ответ. Очень хорошо. - person Blackunknown; 30.09.2014
comment
@Blackunknown, потому что его ответ не ответил на мой вопрос. Я специально указал, что имя атрибута не может быть известно заранее, но он жестко запрограммировал его. Я проголосовал за его ответ, потому что он помог, но отметил мой как ответ, потому что он ответил на мой вопрос. - person adam0101; 30.09.2014
comment
По-моему он дал вам ответ еще. Все, что вы сделали, это добавили переменную вместо того, чтобы жестко запрограммировать ее. Многие ответы, которые люди дают здесь, не будут на 100% такими, какими вы хотите их видеть. Тем более что разница минимальна. - person Blackunknown; 01.10.2014
comment
Что угодно, мне все равно. Я просто подумал, что следующий посетитель захочет увидеть ответ, который лучше всего отвечает на вопрос. - person adam0101; 01.10.2014

arrow_upward
8
arrow_downward

Пользовательский фильтр подходит для этого случая гораздо больше, чем директива:

<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;
  };
});
person Guido Bouman    schedule 08.12.2014
comment
Мне очень нравится этот подход. Я, вероятно, сделаю это таким образом в моем следующем проекте. Я предполагаю, что если вам нужно сделать это программно, вы могли бы использовать $filter('fullPath')('images/img.png') тогда? - person adam0101; 13.03.2015
comment
Да, это тоже преимущество. - person Guido Bouman; 13.03.2015

arrow_upward

arrow_downward

person    schedule
comment
Это близко, но в директиве жестко запрограммировано «href». Что делать, если я хочу использовать директиву на <img src=""? - person adam0101; 14.08.2013
comment
@adam0101, определите другую директиву или сделайте одну директиву более умной, чтобы проверять тип тега: if(element[0].tagName === "A") { ... } else { ... }. - person Mark Rajcok; 14.08.2013