rramona2
11/15/2015 - 2:07 AM
Angular Material Simple Dialog
Angular Material Simple Dialog
md-toolbar h1 {
font-size: 1.250em;
font-weight: 400;
margin: auto;
}var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
var alert;
$scope.showDialog = function($event) {
alert = $mdDialog.alert({
title: 'Attention',
content: 'This is an example of how easy dialogs can be!',
ok: 'Close'
});
$mdDialog
.show( alert )
.finally(function() {
alert = undefined;
});
}
}]);<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<h1>Simple Dialog</h1>
</md-toolbar>
<div layout="row" flex>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<md-button class="md-primary" ng-click="showDialog($event)">Launch Dialog</md-button>
</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="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
</body>
</html>Angular Material Simple Dialog
How to set up an Angular Material dialog with object syntax
Forked from Marcy Sutton's Pen Angular Material Basic App.
Forked from Marcy Sutton's Pen Angular Material Basic App.
Forked from Marcy Sutton's Pen Angular Material Basic App.
A Pen by ryan ramona on CodePen.