Gravatar Angular Directive

gravatar-directive.js

/**
 * gravatar
 * ------------------------------------------------------------------------
 * This is a custom directive for using gravatars.
 *
 * Usage:
 * ```
 * <gravatar email="gravataremail@example.com"
 *   default-img="http://placecage.com/c/200/200"></gravatar>
 * ```
 *
 *
 * NOTES: 
 * 
 * This directive needs md5.js in order to convert an email into a gravatar url.
 * (https://github.com/blueimp/JavaScript-MD5/blob/master/js/md5.min.js)
 * 
 * Also, f you want to use gravatar's default image instead of
 * a custom default image, replace the template with:
 * ```
 * '<img src="http://gravatar.com/avatar/{{gravatarHash}}"/>'
 * ```
 */
angular.module('MyApp')
.directive('gravatar', function () {

  return {
    restrict: 'E',
    template: '<img src="http://gravatar.com/avatar/{{gravatarHash}}?d={{defaultImgUrlEncoded}}"/>',
    scope: {
      email: '@',
      defaultImg: '@'
    },
    link: function(scope) {
      scope.gravatarHash = md5(scope.email);
      scope.defaultImgUrlEncoded = encodeURIComponent(scope.defaultImg);
    }
  };

});