关于模态框的那些事 angularjs

题记：在写代码的时候要注意总结归于性的东西，写有思想的东西；

标题：angularjs中模态框的使用

正文

 //使用modal的时候要在js文档里注入依赖'$uibModal';
$scope.openModal=function(){   
    var modalInstance = $uibModal.open({        // //$uibModal.open()方法返回一个模态窗口实例
    animation:true,
    ariaLableledBy:'modal-title' ,
    ariaDescribedBy:'modal-body',
    tempateUrl:'需要引入模态框的路径'，
    controller:'控制模态框页面的controller'，
    appendTo:'angular.element($document[0].querySelector('.modal-demo'))', //模态框窗口弹出的位置
    backdrop:true,  //打开模态窗口的背景设置，true（灰色背景，在模态窗口之外点击会关闭窗口），false（不显示灰色窗口，不能在窗口之外点击），static（显示灰色背景，在模态窗口关闭之前背景元素不可用）

    resolve：{                         //resolve里为传递到模态窗口中的对象
       items：function（）{
         return   params;        //params为自己定义的对象数组，里面是要传到模态窗口中的值；
         }} 
    });
    modalInstance.opened.then(function(){
  });
   modalInstance.result.then(function(result){

 //确认模态框窗口传过来的结果，里面的值通过result获取
  }，function（reason）{
   //取消模态框，传递过来的原因
  })；

   } 

模态框的controller

//使用时需要依赖注入$uibModalInstance
$scope.list=items;   //获取resolve里传递过来的对象数组
$scope.ok= function(){
$uibModalInstance.close(params);//$uibModalInstance来表示模态窗口的实例，params为需要传递回去的结果 
                                //关闭模态窗口，传递一个结果
}
$scope.cancel =function(){
$uibModalInstance.dismiss('cancel');//取消模态窗口，传递一个原因
}

注： 在同一个页面加载两个模态框的时候要选择两个不同的appendTo，不然会导致其中一个模态框被隐藏。