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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。