angular-ui-bootstrap的弹出框定义成一个服务的实践(二)
定义一个弹出框的服务: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