Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html>
<head>
</head>
<body>
<div ng-controller="PageController">
<button value="Click to open modal" ng-click="openModal" />
</div>
<script type="text/template" id="myModalTemplate.html">
<h1>This is my modal popup template</h1>
<input type="text" ng-model="user.username" />
<input type="password" ng-model="user.password" />
<button ng-click="login" value="login" />
</script>
<script type="application/javascript">
// Step 1: Include ui.bootstrap module.
angular.module("ModalExampleApp", ["ui.bootstrap"])
.controller("PageController", function($scope, $uibModal) {
// In the controller that activates the modal (the activating controller), inject the $uibModal service.
// Activate the modal somehow (here, it's with a button).
$uibModal.open({
controller: "ModalCtrl",
templateUrl: "myModalTemplate.html"
});
}).controller("ModalCtrl", function($uibModalInstance, $scope) {
$scope.user.username = "John";
$scope.user.password = "Test";
$scope.login = function() {
$http.post("/myapp/login", $scope.user).then(function() {
$uibModalInstance.close("ok");
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment