GitHub_ngMaterial: 1531

Illustration of comment to https://github.com/angular/material/issues/1531.

by DineshAngappa

HTML

<link rel="stylesheet" href="http://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.angularjs.org/1.3.13/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.13/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.3.13/angular-aria.min.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<div layout="column" layout-margin="">
  <md-button class="md-primary md-raised" ng-click="showDialog($event)">
    Show dialog
  </md-button>
  <hr />
  Dialog status: {{ data.dialogOpen ? 'OPEN' : 'CLOSED' }}  
</div>

<!-- -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- -->
<!-- Page Footer -->
<small class="footer" ng-non-bindable="">
  <div ng-app="footerApp" ng-controller="FooterCtrl as footer">
    <span class="left">
      <b>Angular v{{footer.version.full}}</b>
      ({{footer.version.codeName}})
    </span>
    <span class="right">
      &copy;
      <a ng-href="{{footer.author.url}}" target="_blank">
        {{footer.author.name}}
      </a>
    </span>
  </div>
</small>

CSS

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
body { padding-bottom: 2.5em; }
.footer { background-color: White; border-top: 1px solid rgba(100, 100, 100, 0.33); bottom: 0; display: block; font-size: 0.75em; height: 2.5em; left: 0; margin: 0 5px; overflow: auto; padding: 5px; position: fixed; right: 0; }
.footer > div { display: flex; flex-direction: row; }
.footer .left { flex-grow: 2; text-align: left; }
.footer .right { flex-grow: 1; text-align: right; }

JavaScript

(function () {'use strict';

angular.
  module('myApp', ['ngMaterial']).
  controller('AppCtrl', AppCtrl);

function AppCtrl($mdDialog, $scope) {
  $scope.data = {greeting: 'Hello'};
  $scope.hideDialog = $mdDialog.hide;
  $scope.showDialog = showDialog;

  function showDialog(evt) {
    $scope.data.dialogOpen = true;
    $mdDialog.show({
      targetEvent: evt,
      scope: $scope.$new(),
      parent: angular.element(document.body),
      template:
        '<md-dialog>' +
        '  <md-content>{{data.greeting}}, world !</md-content>' +
        '  <div class="md-actions">' +
        '    <md-button ng-click="data.dialogOpen=false;hideDialog()">' +
        '      Close' +
        '    </md-button>' +
        '  </div>' +
        '</md-dialog>'
    });
  }
}

}());

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
(function () {'use strict';
var app = 'footerApp';
angular.module(app, []).controller('FooterCtrl', FooterCtrl);
angular.bootstrap(document.querySelector('[ng-app="' + app + '"]'), [app]);
function FooterCtrl($window) {
  this.version = $window.angular.version;
  this.author = {name: 'GKalpak', url: '//github.com/gkalpak'};
}
}());