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