1 <!DOCTYPE html>
2 <html ng-app="ModalDemo" 3 head 4 title></ 5 link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" 6 script src="lib/angular/angular.min.js"script 7 ="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js" 8 ="lib/angular/i18n/angular-locale_zh-cn.js" 9 </10 body11 div ng-controller="ModalDemoCtrl"12 type="text/ng-template" id="myModalContent.html"13 <div class="modal-header>
14 h3>I'm a modal!</h3>
15 </div>
16 <div class="modal-body">
17 <ul>
18 <li ng-repeat="item in items">
19 <a ng-click="selected.item = item">{{ item }}</a>
20 </li>
21 </ul>
22 Selected: <b>{{ selected.item }}</b>
23 24 <div class="modal-footer">
25 <button class="btn btn-primary" ng-click="ok()">OK</button>
26 <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
27 28 </script>
29 <button class="btn" ng-click="open()">Open me!</button>
30 </div>
31 <script>
32 var ModalDemo = angular.module(ModalDemo,[ui.bootstrap]);
33 var ModalDemoCtrl = function ($scope,$modal,$log) {
34 $scope.items = [item1item2item3];
35 $scope.open = function () {
36 var modalInstance = $modal.open({
37 templateUrl: myModalContent.html38 controller: ModalInstanceCtrl,128); line-height:1.5!important">39 resolve: {
40 items: function () {
41 return $scope.items;
42 }
43 }
44 });
45 modalInstance.opened.then(function(){//模态窗口打开之后执行的函数
46 console.log(modal is opened);
47 48 modalInstance.result.then(function (result) {
49 console.log(result);
50 },function (reason) {
51 console.log(reason);//点击空白区域，总会输出backdrop click，点击取消，则会暑促cancel
52 $log.info(Modal dismissed at: + new Date());
53 54 };
55 };
56 var ModalInstanceCtrl = function ($scope,$modalInstance,items) {
57 $scope.items = items;
58 $scope.selected = {
59 item: $scope.items[0]
60 61 $scope.ok = function () {
62 $modalInstance.close($scope.selected);
63 64 $scope.cancel = function () {
65 $modalInstance.dismiss(cancel66 67 68 </script>
69 </body>
70 </html>
