How to set up an Angular Material dialog with a custom template
Forked from Marcy Sutton's Pen Angular Material Basic App.
How to set up an Angular Material dialog with a custom template
Forked from Marcy Sutton's Pen Angular Material Basic App.
| <html lang="en" ng-app="StarterApp"> | |
| <head> | |
| <link rel="stylesheet" href="https://material.angularjs.org/docs.css"> | |
| </head> | |
| <body ng-controller="AppCtrl as a"> | |
| <div> | |
| <div layout="column" layout-align="start start" layout-fill="layout-fill"> | |
| <md-content layout="row" layout-fill layout-align="start center"> | |
| <div flex-gt-md="25"></div> | |
| <md-list flex-gt-md="50" flex="100" layout="column"> | |
| <md-list-item layout-margin class="md-whiteframe-z1"> | |
| <div class="md-list-item-text" layout="column" layout-padding layout-fill> | |
| <div layout="row" layout-align="start center"> | |
| <div class="md-subhead" flex="65">Flex65+Flex</div> | |
| <md-button flex class="md-raised md-primary">Button 1</md-button> | |
| </div> | |
| <div layout="row" layout-align="start center"> | |
| <div class="md-subhead" flex="65">Flex65+Flex35</div> | |
| <md-button flex="35" class="md-raised md-primary">Button 1</md-button> | |
| </div> | |
| </div> | |
| </md-list-item> | |
| </md-list> | |
| <div flex-gt-md="25"></div> | |
| </md-content> | |
| </div> | |
| </div> | |
| <!-- Angular Material Dependencies --> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> | |
| <script src="https://material.angularjs.org/docs.js"></script> | |
| </body> | |
| </html> |
| var app = angular.module('StarterApp', ['ngMaterial']); | |
| app.controller('AppCtrl', ['$mdDialog', function($scope, $mdDialog){ | |
| }]) | |
| .controller('DialogController', function($scope, $mdDialog) { | |
| //alert( this.closeDialog ); | |
| //this.closeDialog = $scope.closeDialog; | |
| /*$scope.closeDialog = function() { | |
| $mdDialog.hide(); | |
| };*/ | |
| }); |