angular $modal模态框

时间 2019-11-17
原文原文链接
<!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>