<code><html ng-app=
"ui.bootstrap.demo"
>
<head>
<script src=
"angular.js"
></script>
<script src=
"ui-bootstrap-tpls-0.12.1.min.js"
></script>
<link href=
"bootstrap/css/bootstrap.min.css"
rel=
"stylesheet"
>
</head>
<body>
<p ng-controller=
"ModalDemoCtrl"
>
<script type=
"text/ng-template"
id=
"myModalContent.html"
>
<p
class
=
"modal-header"
>
<h3
class
=
"modal-title"
>I'm a modal!</h3>
</p>
<p
class
=
"modal-body"
>
<ul>
<li ng-repeat=
"item in items"
>
<a ng-click=
"selected.item = item"
>{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</p>
<p
class
=
"modal-footer"
>
<button
class
=
"btn btn-primary"
ng-click=
"ok()"
>OK</button>
<button
class
=
"btn btn-warning"
ng-click=
"cancel()"
>Cancel</button>
</p>
</script>
<button
class
=
"btn btn-default"
ng-click=
"open()"
>Open me!</button>
<button
class
=
"btn btn-default"
ng-click=
"open('lg')"
>Large modal</button>
<button
class
=
"btn btn-default"
ng-click=
"open('sm')"
>Small modal</button>
<p ng-show=
"selected"
>Selection from a modal: {{ selected }}</p>
</p>
</body>
<script>
angular.module(
'ui.bootstrap.demo'
,[
'ui.bootstrap'
])
.controller(
'ModalDemoCtrl'
,
function
(
$scope
,
$modal
,
$log
) {
$scope
.items = [
'item1'
,
'item2'
,
'item3'
];
$scope
.open =
function
(size) {
var
modalInstance =
$modal
.open({
templateUrl:
'myModalContent.html'
,
controller:
'ModalInstanceCtrl'
,
size: size,
resolve: {
items:
function
() {
return
$scope
.items;
}
}
});
modalInstance.result.then(
function
(selectedItem) {
$scope
.selected = selectedItem;
},
function
() {
$log
.info(
'Modal dismissed at: '
+
new
Date
());
});
};
})
.controller(
'ModalInstanceCtrl'
,
function
(
$scope
,
$modalInstance
, items) {
$scope
.items = items;
$scope
.selected = {
item:
$scope
.items[0]
};
$scope
.ok =
function
() {
$modalInstance
.close(
$scope
.selected.item);
};
$scope
.cancel =
function
() {
$modalInstance
.dismiss(
'cancel'
);
};
});
</script>
</html>
</code>