JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.7/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.7/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script>
var app = angular.module('myApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ui.router'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('done', {
template: '<h1>Done</h1>'
})
.state("campaigns", {
url: "/campaigns",
abstract: true
})
.state("campaigns.add", {
url: "/add",
resolve: {
event: function($stateParams) {
return $stateParams.event;
}
},
onEnter: function($mdDialog, $state) {
var ev = null;
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.body))
.title('This is an alert title')
.content('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(event)).then(function() {
$state.go('done');
});
}
});
}])
.controller('myController', function($scope, $state) {
console.log($state);
$scope.show =...