Angular directives that will parse Facebook plugins added to the DOM after Facebook has been initialized

facebookPluginDirectives.coffee

module = angular.module 'FacebookPluginDirectives', []

createDirective = (name) ->
	module.directive name, ->
		restrict: 'C'
		link: (scope, element, attributes) ->
			FB?.XFBML.parse(element.parent()[0])

createDirective pluginName for pluginName in ['fbActivity', 'fbComments', 'fbFacepile', 'fbLike', 'fbLikeBox', 'fbLiveStream', 'fbLoginButton', 'fbName', 'fbProfilePic', 'fbRecommendations']

facebookPluginDirectives.js

(function() {
  var createDirective, module, pluginName, _i, _len, _ref;

  module = angular.module('FacebookPluginDirectives', []);

  createDirective = function(name) {
    return module.directive(name, function() {
      return {
        restrict: 'C',
        link: function(scope, element, attributes) {
          return typeof FB !== "undefined" && FB !== null ? FB.XFBML.parse(element.parent()[0]) : void 0;
        }
      };
    });
  };

  _ref = ['fbActivity', 'fbComments', 'fbFacepile', 'fbLike', 'fbLikeBox', 'fbLiveStream', 'fbLoginButton', 'fbName', 'fbProfilePic', 'fbRecommendations'];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    pluginName = _ref[_i];
    createDirective(pluginName);
  }

}).call(this);

GitHub needs a 'like' button (liked for coffeescript!)

CoffeeScript is my new <3 :)

Super helpful. Thank you!

Grreat, ty for saving time!

I threw a $timeout around the return on line 11 to ensure that this was always displayed correctly. I found that sometimes it would be ok, other times not without the timeout.

Thx <3