AngularJS Multi-Avatar Directive supporting facebook, twitter, github and gravatar

AngularJS Multi-Avatar Directive

Will apply in the following order:

  1. Facebook ID
  2. Twitter ID
  3. Github ID
  4. Gravatar Email ID or Hash image
  5. Blank user image

In your HTML, use the following. Depending on what your user has defined, it'll display an avatar:

    data-facebook-id='' data-twitter-id='' data-github-id='' data-gravatar-id=''

In your Javascript (coffee):

app = angular.module("yourmodule", ["multi-avatar"]);

Reworked and extended Creating Simple Directive in Angular to now include:

  • Standardized data attribute naming
  • Include Facebook
  • Include Twitter
  • Include GitHub
  • Include Gravatar Email address and Hash support


bower install angular-multi-avatar


npm install angular-multi-avatar

MIT License, See LICENSE.txt