angularjs點擊圖片放大實現(xiàn)上傳圖片預(yù)覽

更新時間：2017年02月24日 14:27:05 作者：zxj娟娟

這篇文章主要為大家詳細介紹了angularjs點擊圖片放大實現(xiàn)上傳圖片預(yù)覽的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了angularjs點擊圖片放大預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下

/*圖片點擊放大再點擊還原*/ 
angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名稱，寫在需要用到的地方img中即可實現(xiàn)放大圖片</span> 
 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"; 
   }) 
  } 
 } 
});

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解AngularJS通過ocLazyLoad實現(xiàn)動態(tài)（懶）加載模塊和依賴
本篇文章主要介紹了詳解AngularJS通過ocLazyLoad實現(xiàn)動態(tài)（懶）加載模塊和依賴，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
AngularJS基礎(chǔ) ng-mouseover 指令簡單示例
本文主要介紹AngularJS ng-mouseover 指令,這里幫大家整理了AngularJS 指令的基礎(chǔ)知識,并附代碼示例,有興趣的小伙伴可以參考下
2016-08-08
angularjs自定義ng-model標簽的屬性
這篇文章主要介紹了angularjs自定義ng-model標簽的屬性的相關(guān)資料,需要的朋友可以參考下
2016-01-01
淺談關(guān)于angularJs中使用$.ajax的注意點
本篇文章主要介紹了關(guān)于angularJs中使用$.ajax的注意點，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
詳解Angular.js的$q.defer()服務(wù)異步處理
相信大家都知道jquery和angular都有defer服務(wù)，這篇文章暫以angular為例談?wù)剛€人的理解，在文章的最后并附上jquery的阮一峰總結(jié)的defer。有需要的朋友們也可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。
2016-11-11
AngularJS在IE8的不支持的解決方法
AngularJS在IE8的不支持怎么辦？下面小編就為大家?guī)硪黄狝ngularJS在IE8的不支持的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
Angular.JS學(xué)習(xí)之依賴注入$injector詳析
隨著javaEE的spring框架的興起，依賴注入（IoC）的概念徹底深入人心，它徹底改變了我們的編碼模式和思維。在AngularJS中也有依賴注入的概念，像spring中的依賴注入，但是又有所不同。Angular中只需要在需要的地方聲明一下即可，類似模塊的引用，因此十分方便。
2016-10-10
對angularJs中2種自定義服務(wù)的實例講解
今天小編就為大家分享一篇對angularJs中2種自定義服務(wù)的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Angular1.x復(fù)雜指令實例詳解
這篇文章主要介紹了Angular1.x復(fù)雜指令,結(jié)合實例形式分析了指令的使用、模板指令、指令的作用域等概念與具體使用技巧,需要的朋友可以參考下
2017-03-03
Angular.JS實現(xiàn)無限級的聯(lián)動菜單(使用demo)
這篇文章主要介紹了Angular.JS中實現(xiàn)無限級聯(lián)動菜單的使用示例，本文是在之前的一篇文章的基礎(chǔ)上進行的幾個demo分享，有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02