Twitter Widgets in AngularJS

twitter-widgets.coffee

# A way to use twitter widgets with angularjs

YOUR_MODULE
.directive('plTwitterButton', ['$timeout', ($timeout) ->
  replace: true
  template: """
  <a class="twitter-share-button"
    href="{{ href }}"
    data-url="{{ url }}"
    data-text="{{ text }}"
    data-count="{{ count }}"
    data-hashtags="{{ hashtags }}"
  >{{ label }}</a>
  """
  link: (scope, element, attrs) ->
    scope.href = attrs.optHref
    scope.url = attrs.optUrl
    scope.text = attrs.optText
    scope.count = attrs.optCount
    scope.hashtags = attrs.optHashtags
    scope.label = attrs.optLabel
    $timeout ->
      # The widgets.load() function expects an element
      # having twitter-widgets as child elements of it.
      twttr?.widgets.load(element.parent()[0])
    return
])
.directive('plTwitterTimeline', ['$timeout', ($timeout) ->
  replace: true
  template: """
  <a class="twitter-timeline"
    href="{{ href }}"
    data-widget-id="{{ widget_id }}"
  >{{ label }}</a>
  """
  link: (scope, element, attrs) ->
    scope.href = attrs.optHref
    scope.label = attrs.optLabel
    scope.widget_id = attrs.optWidgetId
    $timeout ->
      twttr?.widgets.load(element.parent()[0])
    return
])

usage.html

<a data-pl-twitter-timeline data-opt-href="/uesrname/timelines/00000000000000" data-opt-widget-id="00000000000" data-opt-label="My Twitter Wall"></a>

<a data-pl-twitter-button data-opt-href="https://twitter.com/share" data-opt-url="{{ generatedUrl() }}" data-opt-text="Hey! I'm using twitter widgets with AngularJS" data-opt-count="none" data-opt-hashtags="twitter" data-opt-label="Tweet"></a>