定义一个弹出框的服务：alert_boxdefiine(["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