<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="angular-modal-form.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="modalApp">
<h1><a class="btn btn-primary" modal-form data="user" template-url="login.html" method="POST" path="/authenticate" redirect="/" close-on-success="true">Login In</a></h1>
<h1><button class="btn btn-info" ng-click="open()">Open</button></h1>
</body>
</html>
// Code goes here
angular.module('modalApp', ['modal-form']).
run(['$rootScope', '$window', 'formService', function($rootScope, $window, formService) {
$rootScope.user = {
email: "test@google.com",
password: "test123456"
};
$rootScope.init = function() {
$window.location.reload();
};
// open modal form dynamically
$rootScope.open = formService({
data: $rootScope.user,
templateUrl: 'login.html',
method: 'POST',
callback: $rootScope.init,
path: '/authenticate',
dialogClass: 'small',
closeOnSuccess: true
});
}]);
/* Styles go here */
h1, h2, h3 {
text-align: center;
}
'use strict';
angular.module('modal-form', ['ui.bootstrap'])
.factory('formService', ['$modal', '$log', function ($modal, $log) {
var ModalInstanceCtrl = function($scope, $http, $window, $timeout, $modalInstance, config) {
$scope.sync = false;
$scope.error = '';
$scope.formInvalid = false;
$scope.data = config.field?config.data[config.field]:config.data;
$scope.ok = function (f) {
// form input invalid
if (f.$invalid) {
$scope.formInvalid = true;
return;
}
if (config.path) {
$scope.sync = true;
$scope.error = '';
$scope.succ = false;
$http({
method: config.method || 'POST',
url: config.path,
data: $scope.data
}).success(function(data, status, headers, cfg) {
if (config.redirect) {
$window.location.hash = "";
$window.location.pathname = config.redirect;
} else {
if (config.callback) {
config.callback(config.data, data);
}
if (config.closeOnSuccess) {
return $modalInstance.close();
}
$scope.succ = true;
$scope.sync = false;
$timeout(function() { $scope.succ = false;}, 10000);
}
}).error(function(data, status) {
$scope.sync = false;
$scope.error = data.message || 'server response:' + status;
$timeout(function() { $scope.error = '';}, 10000);
});
} else {
if (config.callback) {
config.callback(config.data, null);
}
if (config.closeOnSuccess) {
$modalInstance.close();
}
}
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
var openModal = function (params) {
// set default params
params.data = params.data || {};
if (!params.closeOnSuccess || params.closeOnSuccess === 'true') {
params.closeOnSuccess = true;
} else {
params.closeOnSuccess = false;
}
params.method = params.method || 'POST';
var modalInstance = $modal.open({
templateUrl: params.templateUrl,
controller: ModalInstanceCtrl,
windowClass: params.dialogClass,
resolve: {
config: function() {
return params;
}
}
});
modalInstance.result.then(function (data) {
$log.info('modal closed.');
}, function () {
$log.info('modal dismissed.');
});
};
return function(params) {
return openModal.bind(null, params);
};
}]).directive('modalForm', function() {
return {
restrict: 'EA',
scope: {
data: "=?", // data model bind to the modal dialog template
field: "@", // data field that send to server
templateUrl: "@", // modal dialog template url, required
method: "@", // ajax request method, POST, PUT, etc, defaults to POST
path: "@", // ajax request path
dialogClass: "@", // same as in ui bootstrap modal
redirect: "@", // redirect path on success
closeOnSuccess: "@", // close modal on success, defaults to true
callback: "&" // callback function
},
controller: ['$scope', 'formService', function($scope, formService) {
$scope.open = formService($scope);
}],
link: function(scope, element, attrs) {
element.click(function() {scope.open();});
}
};
});
<div class="modal-header">
<div class="cancel pull-right" ng-click="cancel()">
<span class="close">X</span>
</div>
<h3>Login In</h3>
<h3 class="text-success" ng-show="succ">{{success}}</h3>
<h3 class="text-danger" ng-show="error!=''">{{error}}</h3>
</div>
<div class="modal-body" ng-hide="succ">
<form name="f" class="form-horizontal" role="form">
<div class="form-group" ng-class="{'has-error': !f.email.$valid}">
<div class="col-xs-12">
<input type="text" id="email" name="email" placeHolder="email address" class="form-control" ng-model="data.email" ng-disabled="sync" ng-pattern="/.*@.*/" required/>
</div>
</div>
<div class="form-group" ng-class="{'has-error': !f.password.$valid}">
<div class="col-xs-12">
<input type="password" id="password" name="password" placeHolder="password" class="form-control" ng-model="data.password" ng-disabled="sync" ng-minlength="3" ng-pattern="/^\w+$/"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default btn-primary" ui-keypress="{13:'ok(f)'}" ng-click="ok(f)" ng-disabled="sync" value="submit"/>
</div>