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