global utility function vs. directive

Question

Task:

Build a utility function to build a configurable URL. The URL pattern looks like that

/images/<size>/users/<user_id>

Possible Solutions

1. Build a directive. It could look like follows:

<img my-user-img my-size="small" my-user="4711" />

This is a little bit ugly since I have to add all the boilerplate to support multiple arguments.

2. Build a util/helper function. It could look like follows:

<img ng-src="{{userImg('small', '4711')}}" />

This is ugly since I have to bind the function to $rootScope in order to use it everywhere .

The Question

Which solution is the closest to Best Practice and why? :D

Answer 1

neither 1 or 2. you have the answers provided! i would suggest use a filter with multiple parameter: see: How do I call an Angular.js filter with multiple arguments?

first possible solution with parameter:

filter('userImage', function(){
  return function(val, size, user){
     return '/images/'+size+'/users/'+user;
  };
});

usage:

{{''|userImage:'small':'4711'}}

Instead of '' one could use angular.noop.

if you dont like the '' as noop expression, there is another possibility:

filter('createLink', function(){
  return function(params){
     return '/images/'+params.size+'/users/'+params.user;
  };
});

usage:

{{{size:'small', user:'4711'}|createLink}}

Especially the last solution gives you the possibility use a domain object directly without any mapping.