加拿大28

<small id='1y94o'></small><noframes id='1y94o'>

  • <tfoot id='1y94o'></tfoot>

      <legend id='1y94o'><style id='1y94o'><dir id='1y94o'><q id='1y94o'></q></dir></style></legend>
      <i id='1y94o'><tr id='1y94o'><dt id='1y94o'><q id='1y94o'><span id='1y94o'><b id='1y94o'><form id='1y94o'><ins id='1y94o'></ins><ul id='1y94o'></ul><sub id='1y94o'></sub></form><legend id='1y94o'></legend><bdo id='1y94o'><pre id='1y94o'><center id='1y94o'></center></pre></bdo></b><th id='1y94o'></th></span></q></dt></tr></i><div id='1y94o'><tfoot id='1y94o'></tfoot><dl id='1y94o'><fieldset id='1y94o'></fieldset></dl></div>

          <bdo id='1y94o'></bdo><ul id='1y94o'></ul>

          1. <li id='1y94o'><abbr id='1y94o'></abbr></li>
          2. ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
            当前位置:首页 >> 网页制作 >> web前端 >> AngularJs 弹出模态窗口 $modal $uibModal

            AngularJs 弹出模态窗口 $modal $uibModal

            来源:网络整理     时间:2016-03-21     关键词:

            本篇文章主要介绍了"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",
            			  "<div class=\"modal-header\">"+  
            			      "<h3 class=\"wall\">选择部门</h3>"+  
            			  "</div>"+  
            			  "<div class=\"modal-body\">" + 
            				  	"<div treecontrol class=\"tree-classic well\" tree-model=\"nodes\""+
            						"opti 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中的数据。

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

            本文网址链接:http://bayitaku.com/article/detail_488931.html

            相关图片

            相关文章