function MdFabSpeedDialDirective() {
    return {
      restrict: 'E',

      scope: {
        direction: '@?mdDirection',
        isOpen: '=?mdOpen'
      },

      bindToController: true,
      controller: 'MdFabController',
      controllerAs: 'ctrl',

      link: FabSpeedDialLink
    };

    function FabSpeedDialLink(scope, element) {
      // Prepend an element to hold our CSS variables so we can use them in the animations below
      element.prepend('<div class="_md-css-variables"></div>');
    }
  }
@ngdoc directive
@name mdFabSpeedDial
@module material.components.fabSpeedDial

@restrict E

@description
The `<md-fab-speed-dial>` directive is used to present a series of popup elements (usually
`<md-button>`s) for quick access to common actions.

There are currently two animations available by applying one of the following classes to
the component:

 - `md-fling` - The speed dial items appear from underneath the trigger and move into their
   appropriate positions.
 - `md-scale` - The speed dial items appear in their proper places by scaling from 0% to 100%.

You may also easily position the trigger by applying one one of the following classes to the
`<md-fab-speed-dial>` element:
 - `md-fab-top-left`
 - `md-fab-top-right`
 - `md-fab-bottom-left`
 - `md-fab-bottom-right`

These CSS classes use `position: absolute`, so you need to ensure that the container element
also uses `position: absolute` or `position: relative` in order for them to work.

Additionally, you may use the standard `ng-mouseenter` and `ng-mouseleave` directives to
open or close the speed dial. However, if you wish to allow users to hover over the empty
space where the actions will appear, you must also add the `md-hover-full` class to the speed
dial element. Without this, the hover effect will only occur on top of the trigger.

See the demos for more information.

## Troubleshooting

If your speed dial shows the closing animation upon launch, you may need to use `ng-cloak` on
the parent container to ensure that it is only visible once ready. We have plans to remove this
necessity in the future.

@usage
<hljs lang="html">
<md-fab-speed-dial md-direction="up" class="md-fling">
  <md-fab-trigger>
    <md-button aria-label="Add..."><md-icon md-svg-src="/img/icons/plus.svg"></md-icon></md-button>
  </md-fab-trigger>

  <md-fab-actions>
    <md-button aria-label="Add User">
      <md-icon md-svg-src="/img/icons/user.svg"></md-icon>
    </md-button>

    <md-button aria-label="Add Group">
      <md-icon md-svg-src="/img/icons/group.svg"></md-icon>
    </md-button>
  </md-fab-actions>
</md-fab-speed-dial>
</hljs>

@param {string} md-direction From which direction you would like the speed dial to appear
relative to the trigger element.
@param {expression=} md-open Programmatically control whether or not the speed-dial is visible.