Angular JS directive to Maintaining Aspect Ratio for any block level element

aspect-ratio-directive.coffee

app.directive 'aspectRatio', () ->

  exports =
    scope: {}, # reset scope value to empty between each element otherwise shared ng-repeat pairs will share scope
    replace: false, # this keeps the container element on the page
    transclude: true, # this wraps the template around the content rather than placing the template inside the content
    templateUrl: 'app/directives/aspect-ratio.jade',
    link: (scope, elem, attrs) ->

      # initialize basic aspect ratio
      if attrs.aspectRatio
        scope.ratio = (attrs.aspectRatio*100) + '%'

      # set mobile ratio value to scope for testing
      scope.attrsmobile = attrs.aspectRatioMobile

      # capture and apply min height value, assumes pixel value without unit suffix
      if attrs.minHeight
        scope.minHeight = attrs.minHeight + 'px'

      # test for blank mobile aspect ratio
      if attrs.aspectRatioMobile is '' or attrs.aspectRatioMobile is undefined
        scope.mobileratio = scope.ratio

      # test for explicit mobile aspect ratio and apply value
      if attrs.aspectRatioMobile isnt '' and attrs.aspectRatioMobile isnt undefined and attrs.aspectRatioMobile isnt 'auto'
        scope.mobileratio = (attrs.aspectRatioMobile*100) + '%'       # convert the aspect ratio to height % for padded element
        scope.auto = false                                            # prevenet auto aspect ratio for mobile

      if attrs.aspectRatioMobile is 'auto'
        scope.auto = true

aspect-ratio.jade

.aspect-ratio-block
  .set-aspect-ratio(ng-class="{'auto-height': auto == true}", ng-style="{'min-height': minHeight}")
    .sizing-element.desktop-ratio(ng-style="{'padding-top': ratio}")
    .sizing-element.mobile-ratio(ng-style="{'padding-top': mobileratio}")
    .content-element
      .transcluded(ng-transclude)

aspect-ratio.styl

// ASPECT RATIO DIRECTIVE
// ---------------------------------------------------------------------------

.set-aspect-ratio
  position relative
  display block
  width 100%
  .content-element
    absolute top left
    right 0px
    bottom 0px
    .transcluded
      height 100%


+below(tablet-portrait)
  .sizing-element
    &.mobile-ratio
      display block
    &.desktop-ratio
      display none
  .set-aspect-ratio.auto-height
    display inline-block
    .content-element
      // border 10px solid blue
      height auto
      min-height 200px
      position static
    .sizing-element
      display none !important

+above(769px)
  .sizing-element
    &.mobile-ratio
      display none
    &.desktop-ratio
      display block