angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog) {
$scope.status = ' ';
$scope.customFullscreen = false;
$scope.showAlert = function(ev) {
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#popupContainer')))
.clickOutsideToClose(true)
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);
};
$scope.showConfirm = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.confirm()
.title('Would you like to delete your debt?')
.textContent('All of the banks have agreed to forgive you your debts.')
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Please do it!')
.cancel('Sounds like a scam');
$mdDialog.show(confirm).then(function() {
$scope.status = 'You decided to get rid of your debt.';
}, function() {
$scope.status = 'You decided to keep your debt.';
});
};
$scope.showPrompt = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.prompt()
.title('What would you name your dog?')
.textContent('Bowser is a common name.')
.placeholder('Dog name')
.ariaLabel('Dog name')
.initialValue('Buddy')
.targetEvent(ev)
.ok('Okay!')
.cancel('I\'m a cat person');
$mdDialog.show(confirm).then(function(result) {
$scope.status = 'You decided to name your dog ' + result + '.';
}, function() {
$scope.status = 'You didn\'t name your dog.';
});
};
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
$scope.showTabDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'tabDialog.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
$scope.showPrerenderedDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
contentElement: '#myDialog',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
});
body, html {
height:100%;
padding:0;
margin:0;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.1/docs.css'>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js'></script>
<div class="lalala" ng-controller="AppCtrl" layout="column" layout-align="center center" ng-app="MyApp">
<div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center">
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)">
Abrir
</md-button>
</div>
<script type="text/ng-template" id="tabDialog.tmpl.html"><md-dialog aria-label="Mango (Fruit)" style="width:60%; height:60%;">
<md-dialog-content style="height:100%">
<div layout="column" layout-fill>
<md-content style="height:100%;">
<div layout-fill layout="row">
<md-content flex="100" layout="column">
<md-tabs md-stretch-tabs="always" md-border-bottom flex layout-fill>
<md-tab label="warning new" layout-fill>
<md-tab-content flex layout-fill>
<div layout="column" flex layout-fill>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3601.7912696347275!2d-49.29909298498467!3d-25.478644383766003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce369d560de93%3A0xb2060c21361b8e75!2sR.+S%C3%A3o+Mateus+-+Port%C3%A3o%2C+Curitiba+-+PR!5e0!3m2!1spt-BR!2sbr!4v1485445283960"width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen>
</iframe>
</div>
</md-tab-content>
</md-tab>
<md-tab>
<md-tab-label>
<md-icon class="material-icons md-primary">Tab 02</md-icon>
</md-tab-label>
<md-tab-body>
<div layout="column" layout-fill>
<div flex layout-fill>
<md-content class="containingDiv" flex layout-fill>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
</md-content>
</div>
</div>
</md-tab-body>
</md-tab>
<md-tab>
<md-tab-label>
<md-icon class="material-icons md-primary">warning</md-icon>
</md-tab-label>
<md-tab-body>
<div layout="column" layout-fill>
<div flex layout-fill>
<md-content style="" class="containingDiv" flex layout-fill>
<p>La section should just take up however much space it needs.</p>
<p>this section should just take up however much space it needs.</p>
</md-content>
</div>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
</md-content>
</div>
</md-dialog-content>
</md-dialog>
</script>
</div>
