AngularJs 弹出模态窗口 $modal $uibModal

zh000

2016-03-21

使用angularJs 的指令库 ui-bootstrap 弹出模态窗口：

导入ui-bootstrap-tpls.js 这个是ui-bootstrap的库，版本 1.1.0 （老版本的注入对象$modal）

注入服务：'$uibModal'，和$$uibModalInstance

打开窗口：

$angular.module("app",['ui.bootstarp','mlm/erp/modal/choose-department.html']).controller(function(){	
var openChooseDepModal=function(confim,canel){
		var modalInstance = $uibModal.open({  
         	 //backdrop:false,
		   	 size:'sm',
         	 animation:true,
             templateUrl: 'mlm/erp/modal/choose-department.html', 
           	 controller:'chooseDeptController',
		     resolve: {  
                      nodes:function(){
                    	  return $scope.nodes;
                      }
             }
         });  
	/* modalInstance.opened.then(function(){//模态窗口打开之后执行的函数  
              console.log('modal is opened');  
          });  */
		 
          modalInstance.result.then(function (result) {  
             console.log(result); //result关闭是回传的值 
          }, function (reason) {  
              console.log(reason);//点击空白区域，总会输出backdrop click，点击取消，则会暑促cancel  
              
          });
		
	}

缓存模板文件：

angular.module("mlm/erp/modal/choose-department.html", []).run(["$templateCache", function($templateCache) {
	  $templateCache.put("mlm/erp/modal/choose-department.html",
			  "<div class=\"modal-header\">"+  
			      "<h3 class=\"wall\">选择部门</h3>"+  
			  "</div>"+  
			  "<div class=\"modal-body\">" + 
				  	"<div treecontrol class=\"tree-classic well\" tree-model=\"nodes\""+
						"options=\"treeOptions\" on-selection=\"selectNode(node,selected)\""+
						"selected-node=\"selectedNode\">"+
						"{{node.text}}({{node.id}})</div>"+
				   "</div>"+  
			  "<div class=\"modal-footer\">"+  
			      "<button class=\"btn btn-danger\" ng-click=\"ok()\">确认</button>"+  
			      "<button class=\"btn btn-default\" ng-click=\"cancel()\">取消</button>"+  
			  "</div>");
	}]);

chooseDeptController：

angular("app").controller("chooseDeptController",['$scope','$uibModal','$uibModalInstance','service.login-set',function($scope,$uibModal,$uibModalInstance,service){
	
	$scope.loadNodes = function() {
		service.getAll().success(function(data,status){
			service.popSuccess("加载部门树成功");
			$scope.nodes =  data;
			
			$scope.selectedNode = $scope.nodes[0];
			$scope.currentNode = $scope.selectedNode;
		}).error(function(data,status){
			service.popError("加载部门树失败");
		});
	}
	$scope.loadNodes();
	
	$scope.selectNode = function(node,selected) {
		if(selected){
			$scope.currentNode = node;
		}else{
			$scope.currentNode = null;
		}
	};
	
	
	 $scope.ok = function () {  
         $uibModalInstance.close($scope.currentNode);
         
     };  
     $scope.cancel = function () {  
         $uibModalInstance.dismiss('cancel');
         
     };  
	
}]);

需要和模态窗口进行数据交互是，需要为他指定独立的controller（另外的方法是直接在打开窗口的controller属性中指定controller：function (){}）。模态窗口中使用的数据是指定的controller（这里是cooseDeptController）scope中的数据。

ui-bootstrap