Jak ustawić natywny atrybut z dyrektywy AngularJS?

Question

Chciałbym napisać HTML podobnego do:

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

I mieć dyrektywę o nazwie „sharedasset”, który pobiera pełną ścieżkę do img.png i ustawia wartość atrybutu bez dyrektywy mającej żadnej wiedzy co nazwa atrybutu jest z wyprzedzeniem. czy to możliwe?

Aktualizacja

Odkąd opublikowany pierwotnie to były pewne ulepszenia kątowe i pomyślałem, że podzielę się tym co robię teraz w wyniku. W HTML używam odpowiedzi Guido Boumana, która ma stworzyć filtr, a teraz z funkcją Angula's bind once, to czyni ją najlepszą opcją w mojej opinii.

W kodzie JS chociaż zamiast wstrzykiwania $filter i moją globalVars stały wszędzie, teraz po prostu poprzedzić słowo static do dowolnej ścieżki składnika aktywów, który jest gospodarzem na statycznego serwera treści jak {templateUrl: "static/someTemplate.html"} i następnie wykorzystać kątowym HTTP Interceptor aby znaleźć dowolną ścieżkę zaczynającą się od "static" i zastąpić ją domeną serwera statycznego. Bardzo prosta.

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

Nie wiem, gdzie są coraz fullPathUrl od, więc sztywno go w funkcji łącza.

Answer 2

Nie chciałem dyrektywa dbać co nazwa atrybutu było, więc to, co skończyło się robi:

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

Aktualizacja: Zmieniłem je domyślnie do atrybutu "src", ponieważ najczęstszym scenariuszem będą obrazy.

Answer 3

Niestandardowy filtr jest znacznie bardziej nadaje się do tego przypadku niż dyrektywy:

<a href="{{'images/img.png' | fullPath}}">test</a> 
<img src="{{'images/img.png' | fullPath}}" /> 

Filtr: (Zakładając, że mamy globalny moduł filters)

angular.module('filters').filter('fullPath', function(globalVars) { 
    return function(url) { 
    return globalVars.staticWebsite + "/app/styles/main/" + url + "?build=" + globalVars.buildNumber; 
    }; 
});