<!doctype html>
<html ng-app="mediatorDemo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="UserProfileCtrl" class="container">
<h1 ng-show="user.status === 'new'">Complete your registration!</h1>
<h1 ng-show="user.status === 'finished'">Congrats!</h1>
<h1 ng-show="user.status === 'incomplete'">Registration incomplete!</h1>
<hr />
<div ng-show="user.status !== 'finished'">
Hi {{user.firstName}},
<button class="btn btn-default" ng-click="begin()">Continue</button>
</div>
<div ng-show="user.status === 'finished'">
<h2>Completed profile</h2>
<hr />
<ul>
<li ng-show="user.firstName">Firstname: {{user.firstName}}</li>
<li ng-show="user.lastName">Lastname: {{user.lastName}}</li>
<li ng-show="user.phone">Phone: {{user.phone}}</li>
<li ng-show="user.email">Email: {{user.email}}</li>
</ul>
</div>
</div>
</body>
</html>
angular.module('mediatorDemo', ['ui.bootstrap']);
angular.module('mediatorDemo').controller('UserProfileCtrl', function ($scope, $log, ModalWorkFlow) {
// Bob hasnt fully registered yet
$scope.user = {
firstName: 'Bob',
lastName: '',
phone: '',
email: '',
status: 'new'
};
// kick off the registration presentation
$scope.begin = function (user) {
ModalWorkFlow.beginPresentation(angular.copy($scope.user));
};
// act on cancel event triggered by ModalWorkFlow
$scope.$on('modalPresentation.canceled', function () {
$scope.user.status = 'incomplete';
});
// act on finish event triggered by ModalWorkFlow
var disconnect = $scope.$on('modalPresentation.finished', function (evt, user) {
angular.extend($scope.user, user);
$scope.user.status = 'finished';
// disconnect the listener
disconnect();
});
});
angular.module('mediatorDemo').factory('ModalWorkFlow', function ($modal, $rootScope) {
function beginPresentation (user) {
openUserModal.call(user);
}
function openUserModal () {
handler('userModalContent.html', this, openInfoModal);
}
function openInfoModal () {
handler('infoModalContent.html', this, openReviewModal);
}
function openReviewModal () {
handler('reviewModalContent.html', this);
}
// modal constructor, and close listener
// responsible for displaying the modal and
// either calling the next modal
// or publishing the new user to subscribers
function handler (templateUrl, user, nextModalOpenFn) {
var modal = $modal.open({
templateUrl: templateUrl,
controller: 'UserModalCtrl',
// resolve will inject user into our controller as a dependency called 'user'
resolve: {
user: function () {
return user;
}
}
});
// modal.result is a promise that is resolved
// when $modalInstance in the modal controller calls close or dismiss
modal.result.then(
// success callback
function close(user) {
if (nextModalOpenFn) {
nextModalOpenFn.call(user);
}
else {
$rootScope.$broadcast('modalPresentation.finished', user)
}
},
// fail callback
function dismiss() {
$rootScope.$broadcast('modalPresentation.canceled')
}
);
}
// public interface
return {
beginPresentation: beginPresentation
}
});
angular.module('mediatorDemo').controller('UserModalCtrl', function ($scope, $modalInstance, user) {
$scope.user = user;
$scope.ok = function () {
$modalInstance.close($scope.user);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
<div class="modal-header">
<h3 class="modal-title">Additional info</h3>
</div>
<div class="modal-body">
Tel: <input ng-model="user.phone" type="phone">
Email: <input ng-model="user.email" type="text">
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Next</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
<div class="modal-header">
<h3 class="modal-title">Review</h3>
</div>
<div class="modal-body">
<ul>
<li>First: {{user.firstName}}</li>
<li>Last: {{user.lastName}}</li>
<li>Phone: {{user.phone}}</li>
<li>Email: {{user.email}}</li>
</ul>
Agree to Terms: <input ng-model="agree" type="checkbox">
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()" ng-disabled="!agree">Done</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
<div class="modal-header">
<h3 class="modal-title">Basic info</h3>
</div>
<div class="modal-body">
First:
<input ng-model="user.firstName" type="text">
Last:
<input ng-model="user.lastName" type="text">
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Next</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>