angularjs上传图片时预览-点击图片放大

承接上一篇文章

 

/*图片点击放大再点击还原*/  
angular.module('routerModule').directive('enlargePic',function(){//enlargePic指令名称，写在需要用到的地方img中即可实现放大图片
    return{  
        restrict: "AE",  
        link: function(scope,elem){  
            elem.bind('click',function($event){  
                var img = $event.srcElement || $event.target;  
                angular.element(document.querySelector(".mask"))[0].style.display = "block";  
                angular.element(document.querySelector(".bigPic"))[0].src = img.src;  
            })  
        }  
    }  
})  
.directive('closePic',function(){  
    return{  
        restrict: "AE",  
        link: function(scope,elem){  
            elem.bind('click',function($event){  
                angular.element(document.querySelector(".mask"))[0].style.display = "none";  
            })  
        }  
    }  
});  

 

html关键代码
<!-- 图片 -->
<div><img ng-src="showImg/{{dealer.idCardBack}}" class="idCardBack" enlarge-pic/></div>

<!-- 图片放大遮罩层 -->

<div class="mask" close-Pic>
    <div class="mask-box"></div>
    <div class="big-pic-wrap">
      <img src="" alt="" class="bigPic" />
      <span class="close-pic"><i class="fa fa-close"></i></span> 
    </div>
</div>


css代码
/*图片放大遮罩层*/
 .mask{
     display: none;
 }
 .mask-box{
     position:absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 80;
     opacity: 0.5;
     background: #000;
 }
 .big-pic-wrap{
    position:fixed;
    top:50%;
    left:50%;
    margin-left: -460px;
    margin-top: -300px;
    width:920px;
    height:620px;
    padding:10px;
    z-index:90;
    background:#fff;
 }
 .bigPic{
     width:900px;
     height:600px;
 }
  /*关闭大图按钮*/
  .close-pic{
     position:absolute;
     top:-5px;
     right:-5px;
     display:inline-block;
     width: 35px;
     height: 35px;
     cursor:pointer;
     border-radius:50% !important;
     background: #393A3C;
     text-align: center;
     line-height: 40px;
  }
  .close-pic:hover{
      background: #D43F27;
  }
  .close-pic>i{
  font-size: 25px;
   color:#fff;
  }