AngularJS slideFade / fade directives

angular-slide-fade.coffee

# Requires jQuery.slideFade.coffee gist
# https://gist.github.com/4425644

app.directive 'slideFadeShow', ->
  (scope, elem, attrs) ->
    $elem = $(elem)
    exp = attrs.slideFadeShow
    duration = 600

    slideElem = (toShow, init = false) ->
      # If init is true (initial load) and exp is false
      # then hide instantly (prevent flash of content)
      if not toShow and init is true then return $elem.hide()
      # Otherwise set type and delegate to animation fn.
      if toShow
        $elem.slideFadeDown(duration)
      else
        $elem.slideFadeUp(duration)
      return

    # Initial load. Evaluate exp and set 'init' to true
    slideElem(scope.$eval(exp), true)

    # Set watch on slideFadeShow attr expression
    scope.$watch ->
      scope.$eval exp
    , (toShow) ->
      slideElem(toShow)

app.directive 'fadeShow', ->
  (scope, elem, attrs) ->
    $elem = $(elem)
    exp = attrs.fadeShow

    # Check if we're mobile and don't animate by default if so
    duration = 400

    # Fade fn. If init is true (initial load) and exp
    # is false then hide instantly (prevent flash of content)
    fadeElem = (toShow, init = false) ->
      if toShow
        $elem.fadeIn(duration)
      else
        if init then $elem.hide() else $elem.fadeOut(duration)
      return

    fadeElem(scope.$eval(exp), true)

    # Set watch
    scope.$watch ->
      scope.$eval exp
    , (toShow) ->
      fadeElem(toShow)