定义一个弹出框的服务：alert_box
defiine(["app"],function(mainapp){
mainapp.controller('ModalInstanceCtrl',[ "$scope","$uibModalInstance","items",function ($scope, $uibModalInstance, items) {
$scope.items = items;//来自服务的resolve
$scope.selected = {
item: $scope.items[0]
};
//对应于服务then的第一个函数
$scope.ok = function () {//点击”确定“按钮
$uibModalInstance.close($scope.selected.item);
};
//对应于then的第二个服务
$scope.cancel = function () {//点击”取消“按钮
$uibModalInstance.dismiss('cancel');
};
})];
mainapp.factory("alert_box",["$uibModal","$log",function($uibModal,$log){
var alert_box={};
alert_box.change_team(){
var items=["测试1"，"测试2","测试3"];
var modalInstance=$uibModal.open({
animation:true,
templateUrl:"js/service/myModal/modal_alert.html",
controller:"ModalInstanceCtrl",
size:"large",
resolve:{//保证在js服务加载之前，先执行（注入一个items,用于将服务里面的数据传递到控制器）
items:function(){
return items;
}
}
});
modalInstance.result.then( //then的第一个函数对应ok(),第二个函数对应cancel()
function(sel){console.log(sel)},
function(){console.log(”用户取消操作“);}
);
}
return alert_box;
}]);
});
弹出框服务的使用：（我这里是在一个指令里面调用的）
define(["app","js/service/myModel/model_alert"],function(mainapp){//引入服务文件
mainapp.directive('myheader',[function(){
return{
replace:true,
templateUrl:"directive_tpls/header.html",//指令的模版页面
controller:["$scope","alert_box",function($scope,alert_box){
.......///
其他的业务逻辑神略
.......///
$scope.openmodel=function(){
alert_box.change_team();//通过服务调用
}
}]
}
}]);
});
然后就可以在指令的模版页面中调用
例如：<div ng-click="openmodal()"></div>
以上的封装似乎还是来的简单，下面再来一次进阶封装
1）还是定义一个服务
define(['app','js/service/myModal/modal_ctrl'],function(mainapp){
mainapp.factory('alert_box',['$uibModal','$log',function($uibModal,$log){
var alert_box={};
alert_box.open_modal=function(obj){
var items=obj.info;
return $uibModal.open({
animate:obj.animate,
templateUrl:obj.tpl_url,
controller:obj.self_ctrl,
size:obj.size,
resolve:{
items:function(){
return items;//这个参数可以在弹出框控制器中注入，用于页面控制器向弹出框控制器传参数
}
}
})
}
}]);
});
2）modal_ctrl，我这里是将所有的弹出框控制器，集中在这里(遍历管理)，当然你也可以直接写在上面的服务中
js/service/myModal/modal_ctrl
define(['app',
"js/service/addApplicant/checkbox_add_applicant",
'js/service/choiceInventors/choice_add_inventors',
'js/service/alertModal/cofirm'
],function(mainapp){
mainapp.registerController("modal_ctrl",[function(){
}]);
});
3）定义弹出框Ctrl,用于弹出框模版的数据交互处理
define(['app'],function(mainapp){
mainapp.registerController("checkboxAddInventors",['$uibModalInstance','$scope','items',function($uibModalInstance,$scope){
/*
给页面确定，取消按钮两个事件（通过这两个方法可以将数据信息传递给服务）
*/
$scope.sure=function(){
$uibModalInstance.close("点击确定按钮");
}
$scope.cancel=function(){
$uibModalInstance.dismiss("点击取消按钮");
}
}]);
});
4）在这里省略弹出框模版了:js/service/choiceInventors/checkbox_add_Invertors.html
5）在页面控制器使用弹出框服务
define(['app'
,'js/service/modal_alert'
],function(mainapp){
mainapp.registerCtroller("addCtrl",['$scope','alert_modal',function($scope,alert_modal){
/*
给他一个触发事件
*/
$scope.open=function(){
alert_box.open_modal({
tpl_url:'js/service/choiceInventors/checkbox_add_Invertors.html',
self_ctrl:'checkboxAddInvertors',
size:870,
animate:true
}).then(function(res){//点击确定按钮的回调函数
},function(res){//点击取消的回调函数
});
}
}]);
}); 页面控制器-------------------resolve:{ }-------------------->弹出框模版控制器
弹出框控制器------------回调函数------------------------------>页面控制器
注意：使用的版本
在自定义服务时，是不能注入$scope的
http://angular-ui.github.io/bootstrap/versioned-docs/1.3.1/#/modal