1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<!doctype html>
<html ng-app="backButtonDemo">
<head>
<meta charset="utf-8">
<title>ngDialog demo</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../css/ngDialog.css">
<link rel="stylesheet" href="../../css/ngDialog-theme-default.css">
<link rel="stylesheet" href="../../css/ngDialog-theme-plain.css">
<link rel="stylesheet" href="../../css/ngDialog-custom-width.css">
<style>
a, button {
font: 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
display: block;
color: #333;
margin-bottom: 10px;
}
/* The following 'important' styles are just here to show off trapFocus */
button.ngdialog-button {
border: solid transparent 1px !important;
}
button.ngdialog-button:focus {
border: solid black 1px !important;
}
.ngdialog h2:focus { outline: none; }
</style>
</head>
<body>
<ui-view />
<!-- Templates -->
<script type="text/ng-template" id="home.html">
<h1> Home Page </h1>
<h1> Navigate to the about page </h1>
<button ui-sref="about"> ABOUT PAGE </button>
</script>
<script type="text/ng-template" id="about.html">
<h1> About Page </h1>
<p> {{ text }} </p>
<button ui-sref="home"> HOME PAGE </button>
</script>
<script type="text/ng-template" id="resolveDialog">
Sup?
<div class="ngdialog-buttons">
<button class="ngdialog-button ngdialog-button-primary" ng-click="confirm()"> Continue </button>
<button class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog()"> Go Back </button>
</div>
</script>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
<script>window.angular || document.write('<script src="../../bower_components/angular/angular.min.js">\x3C/script>')</script>
<script src="../../js/ngDialog.js"></script>
<!-- App -->
<script>
angular.module('backButtonDemo', ['ngDialog', 'ui.router'])
.config(function($urlMatcherFactoryProvider, $stateProvider){
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider.state('home',
{
url: '',
templateUrl: 'home.html'
})
.state('about',
{
url: '/about',
templateUrl: 'about.html',
controller: 'mainController',
resolve: {
'RESOLVE_DATA' : function($q) {
var defer = $q.defer();
setTimeout(function() {
defer.resolve('the data for this page resolves after 1ms');
}, 1);
return defer.promise;
}
}
});
})
.run(function($rootScope) {
$rootScope.$on('$locationChangeSuccess', function(){
console.log('$locationChangeSuccess event fired');
});
$rootScope.$on('$stateChangeSuccess', function(){
console.log('$stateChangeSuccess event fired');
});
})
.controller('mainController', function($scope, RESOLVE_DATA, ngDialog, $state){
$scope.text = RESOLVE_DATA;
ngDialog.openConfirm({
template: 'resolveDialog',
className: 'ngdialog-theme-default',
scope: $scope,
closeByDocument: false,
closeByEscape: false,
showClose: false,
closeByNavigation: true
}).then(function(value) {
return value;
}, function(reason) {
$state.go('home');
return reason;
});
});
</script>
</body>
</html>
|
