function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
  return {
    restrict: 'E',
    link: function(scope, element) {
      element.addClass('_md');     // private md component indicator for styling

      $mdTheming(element);
      $$rAF(function() {
        var images;
        var content = element[0].querySelector('md-dialog-content');

        if (content) {
          images = content.getElementsByTagName('img');
          addOverflowClass();
          // delayed image loading may impact scroll height, check after images are loaded
          angular.element(images).on('load', addOverflowClass);
        }

        scope.$on('$destroy', function() {
          $mdDialog.destroy(element);
        });

        /**
         *
         */
        function addOverflowClass() {
          element.toggleClass('md-content-overflow', content.scrollHeight > content.clientHeight);
        }


      });
    }
  };
}
@ngdoc directive
@name mdDialog
@module material.components.dialog

@restrict E

@description
`<md-dialog>` - The dialog's template must be inside this element.

Inside, use an `<md-dialog-content>` element for the dialog's content, and use
an `<md-dialog-actions>` element for the dialog's actions.

## CSS
- `.md-dialog-content` - class that sets the padding on the content as the spec file

## Notes
- If you specify an `id` for the `<md-dialog>`, the `<md-dialog-content>` will have the same `id`
prefixed with `dialogContent_`.

@usage
### Dialog template
<hljs lang="html">
<md-dialog aria-label="List dialog">
  <md-dialog-content>
    <md-list>
      <md-list-item ng-repeat="item in items">
        <p>Number {{item}}</p>
      </md-list-item>
    </md-list>
  </md-dialog-content>
  <md-dialog-actions>
    <md-button ng-click="closeDialog()" class="md-primary">Close Dialog</md-button>
  </md-dialog-actions>
</md-dialog>
</hljs>