快捷導(dǎo)航

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

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

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

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

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

效果圖：

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

您可能感興趣的文章:

相關(guān)文章

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