angular $modal模态框

it2022-05-06  8

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css"/> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> </head> <body ng-app='myapp' > <h1 ng-controller='mycontroller' ng-click='kitme("lg")'>点我</h1> <script type="text/ng-template" id="test.html"> //angular的模态框是可以载入一个html页面的,这里通过ng-template来创建一个html模块,也可以创建一个html文件。 <div class="modal-header"> <h3 class="modal-title" id="modal-title">hello</h3> </div> <div class="modal-body" id="modal-body"> <h1>就翻身解放了就</h1> </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> </div> </script> <script type="text/javascript"> angular.module('myapp',['ngAnimate', 'ngSanitize', 'ui.bootstrap']).controller('mycontroller',function ($scope,$uibModal){ $scope.item='item465554645'; $scope.kitme=function(size){ var modalInstance=$uibModal.open({ animation:true, ariaLabelledBy: 'modal-title', ariaDescribedBy: 'modal-body', templateUrl: 'test.html', //载入的html文件 controller: 'ModalInstanceCtrl', //为载入的文件定义一个控制器 size: size, // size : lg sm 两值 resolve: { //resolve是成功创建模态框时,将有效数据传给模态框的控制器,模态框的控制通过注入的形式获取,这里传送了一个item的值; item: function () { return $scope.item; } } }); modalInstance.result.then(function (selected) { //配合模态框模块执行完毕,成功关闭后执行的回调函数。selected是模态框传过来的值。 alert(selected); }, function () { alert('error'); },function (){                        //取消关闭后执行。                    }); }; }); angular.module('myapp').controller('ModalInstanceCtrl',function($uibModalInstance,$scope,item){ //此控制器只有在模态框成功打开时才会执行。 $scope.ok = function () { $uibModalInstance.close('wang'); //close方法会将参数值回调返回。 }; $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); //关闭模态框,也会执行回调。 }; }); </script> </body> </html>

  

 

转载于:https://www.cnblogs.com/changyaoself/p/7382674.html


最新回复(0)