点击页面上某个按钮，弹出类似bootstrap的模态对话框。 点击对话框上的确定按钮，会传递数据到页面上展示。
求具体实现代码，重用性要高，维护性要好！
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
下面是AngularUI上的例子，有几点需要注意的地方
bootstrap.css
ui.bootstrap
不要忘了template
<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>
编写一个模态对话框 要引入 ui-bootstrap-tpls-0.12.1.min.js， 个人不建议这么做 自己写一个组件 就几行代码 可以实现这些效果 样式倒是可以用bootstrap的。 自己写组件比用别人的更灵活 能把控的住 而且可以提升自身能力， 下面就是我用directive写的弹窗 具体的代码后面提供，
http://angular-ui.github.io/bootstrap/
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
下面是AngularUI上的例子，有几点需要注意的地方
bootstrap.css和ui.bootstrapmodule不要忘了template
编写一个模态对话框 要引入 ui-bootstrap-tpls-0.12.1.min.js， 个人不建议这么做 自己写一个组件 就几行代码 可以实现这些效果 样式倒是可以用bootstrap的。 自己写组件比用别人的更灵活 能把控的住 而且可以提升自身能力， 下面就是我用directive写的弹窗 具体的代码后面提供，
http://angular-ui.github.io/bootstrap/