In an AngluarJS application, I have a table filled with data, and I want the cell not to display raw data, but a formatted version, actually a link to a web page, with a URL using raw data. In other words, something like:
<td><a href="http//www.website.com/[RAW_DATA]">[RAW_DATA]</A></td>
I see 4 ways to achieve this:
1: specify the link in the template using something like this:
<td><a href="http//www.website.com/{{raw_data}}">{{raw_data}}</A></td>
2: using a custom directive, for example:
Js
directive('custom_link', function() {
return{
restrict: 'E',
template:'<a href="http//www.website.com/{{raw_data}}">{{raw_data}}</A>'
}
});
HTML
<td><custom_link /></td>
3: using a custom filter, for example:
Js
filter('custom_link', function() {
return function(raw_data) {
return "http//www.website.com/"+raw_data;
};
})
HTML
<td><a href="{{raw_data|custom_link}}">{{raw_data}}</A></td>
4: using a custom directive AND a custom filter, for example:
Js
directive('custom_link', function() {
return{
restrict: 'E',
template:'<a href="{{raw_data|custom_link_filter}}">{{raw_data}}</A>'
}
});
filter('custom_link_filter', function() {
return function(raw_data) {
return "http//www.website.com/"+raw_data;
};
})
HTML
<td><custom_link /></td>
Which "solution" is the most "elegant" or "matching with AngularJS"?
thank