<!DOCTYPE html>
<html ng-app="testModal">
<head>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" data-semver="3.2.0" data-require="bootstrap-css@*" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" data-semver="2.1.1" data-require="jquery@*"></script>
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="modalForm">
<script type="text/ng-template" id="myModalContent.html">
<!-- SHOW ERROR/SUCCESS MESSAGES -->
<div id="messages" class="well" ng-show="message">{{ message }}</div>
<form name="addDomainForm" novalidate ng-submit="submit(addDomainForm)">
<div class="modal-header">
<h6 class="modal-title"><i class="fa fa-plus"></i> neue Werbefläche </h6>
</div>
<div class="modal-body">
<div class="form-group">
<input type="domain" ng-model="formData.domain" class="form-control" id="domainAddress" placeholder="Domain Adresse">
</div>
<textarea rows="10" ng-model="formData.description" class="form-control" placeholder="Beschreiben Sie Ihre Aktivität" ng-minlength="15"></textarea>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Save" />
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</form>
<pre>
{{ addDomainForm }}
</pre>
</script>
<button class="btn btn-success" ng-click="open()"><i class="glyphicon glyphicon glyphicon-plus-sign icon-plus-sign"></i> new Item </button>
</div>
</body>
</html>
// Code goes here
angular.module("testModal", ['ui.bootstrap'])
.controller("modalForm", function($scope, $modal) {
$scope.addDomainForm = {};
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance,$log) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.submit = function(addDomainForm) {
alert();
};
};
/* Styles go here */