AngularJs 弹出模态窗口 $modal $uibModal

本篇文章主要介绍了"AngularJs 弹出模态窗口 $modal $uibModal"，主要涉及到方面的内容，对于web前端感兴趣的同学可以参考一下： 使用angularJs 的指令库 ui-bootstrap 弹出模态窗口：导入ui-bootstrap-tpls.js 这个是ui-bootstrap的库，版本...

使用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",
			  "
"+  
			      "
选择部门
"+  
			  "
"+  
			  "
" + 
				  	"
"+
						"{{node.text}}({{node.id}})
"+
				   "
"+  
			  "
"+  
			      "确认"+  
			      "取消"+  
			  "
");
	}]);

  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中的数据。

以上就介绍了AngularJs 弹出模态窗口 $modal $uibModal，包括了方面的内容，希望对web前端有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_488931.html