Angular Material Layout Test

by Kai_Draord

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css">
<div ng-app="app" ng-controller="ctrl">
  <button class="btn btn-sm" ng-click="openModal($event)">Open Modal Example</button>
  <div class="gp-detailWrapper"></div>

</div>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

.gp-detailWrapper {
  height: 100%;
  width: 100%;
}

JavaScript

var app = angular.module('app', ['ngMaterial']);

app.controller('ctrl', function($scope, $mdDialog) {
  $scope.openModal = function(ev) {
    $mdDialog.show({
      controller: function($scope, $rootScope, $mdDialog) {

        $scope.hide = function() {
          $mdDialog.hide();
        };
        $scope.cancel = function() {
          $mdDialog.cancel();
        };

      },
      template: `<md-dialog>
    <md-dialog-content>
        <div class="md-dialog-content">test</div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
        <md-button ng-click="cancel()">Close</md-button>
    </md-dialog-actions>
</md-dialog>`,
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose: true,
      locals: {},
      onRemoving: function(event, removePromise) {}
    });
  };
});