Comparing an avatar implementation with angular and ember. http://www.angularails.com/articles/creating_simple_directive_in_angular

angular.js

// Because people can't seem to find the gist description, here is the source
// of this code, a post found in last weeks JS Weekly, it is not my code
// http://www.angularails.com/articles/creating_simple_directive_in_angular

angular.module('ui-multi-gravatar', [])
  .directive('multiAvatar', ['md5', function (md5) {
    return {
      restrict: 'E',
      link:function(scope, element, attrs) {

        var facebookId = attrs.facebookId;
        var githubUsername = attrs.githubUsername;
        var email = attrs.email;

        var tag = '';
        if ((facebookId !== null) && (facebookId !== undefined) && (facebookId !== '')) {
          tag = '<img src="http://graph.facebook.com/' + facebookId + '/picture?width=200&height=200" class="img-responsive"/>'
        } else if ((githubUsername !== null) && (githubUsername !== undefined) && (githubUsername !== '')){
          tag = '<img src="https://identicons.github.com/' + githubUsername + '.png" style="width:200px; height:200px" class="img-responsive"/>';
        } else { 
          var hash = ""
          if ((email !== null) && (email !== undefined) && (email !== '')){
            var hash = md5.createHash(email.toLowerCase());
          }
          var src = 'https://secure.gravatar.com/avatar/' + hash + '?s=200&d=mm'
          tag = '<img src=' + src + ' class="img-responsive"/>'
        }

        element.append(tag);
      }
    };
  }]);

ember.js

App.XAvatarComponent = Ember.Component.extend({

  tagName: 'img',

  classNames: 'img-responsive',
  
  width: 200,
  
  height: 200,

  service: 'gravatar',

  src: function() {
    return this[this.get('service')+'Url']();
  }.property('service', 'user'),

  facebookUrl: function() {
    return 'http://graph.facebook.com/' + this.get('user') + '/picture?type=large';
  },

  githubUrl: function() {
    return 'https://identicons.github.com/' + this.get('user') + '.png'
  },

  gravatarUrl: function() {
    var hash = md5.createHash(this.get('user').toLowerCase());
    return 'https://secure.gravatar.com/avatar/' + hash + '?s=200&d=mm';
  }

});

usage.hbs

Angular

<multi-avatar data-facebook-id="717976707"/>
<multi-avatar data-github-username="jwo"/>
<multi-avatar data-email="[email protected]"/>


Ember

{{x-avatar service="github" user="rpflorence" width=50 height=50}}
{{x-avatar service="facebook" user="717976707"}}
{{x-avatar user="[email protected]"}}

@rpflorence I'm pretty sure I'm the one that screwed you here. I tweeted this as a "comparison" of ember and angular. https://mobile.twitter.com/polotek/status/387601840516259841

I didn't read the gist description and screwed up the context for everybody. Sorry.