uibmodal模态框打开另一个模态框_AngularJs 弹出模态窗口 $modal $uibModal

使用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",

"

"+

"

选择部门

"+

"

"+

"

" +

"

"options=\"treeOptions\" on-selection=\"selectNode(node,selected)\""+

"selected-node=\"selectedNode\">"+

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