angularjs點擊圖片放大實現(xiàn)上傳圖片預覽
更新時間：2017年02月24日 14:27:05 作者：zxj娟娟
這篇文章主要為大家詳細介紹了angularjs點擊圖片放大實現(xiàn)上傳圖片預覽的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了angularjs點擊圖片放大預覽的具體代碼，供大家參考，具體內(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家深入的介紹了關(guān)于Angular.JS中Scope繼承的相關(guān)資料，Angular。JS中scope之間的繼承關(guān)系使用JavaScript的原型繼承方式實現(xiàn)，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章分別給大家介紹了AngularJS實現(xiàn)標簽頁的兩種方式，一種是通過普通指令實現(xiàn)標簽頁，另外一種是通過自定義指令實現(xiàn)的標簽頁，有需要的朋友們可以來參考借鑒，下面來一起看看吧。2016-09-09
這篇文章主要為大家介紹了Angular模塊封裝概念常見的錯誤分析理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了Angular4學習筆記之準備和環(huán)境搭建項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
requirejs AngularJS結(jié)合使用示例解析
這篇文章主要為大家介紹了requirejs AngularJS結(jié)合使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了Angularjs之filter過濾器的相關(guān)資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11
AngularJS基于factory創(chuàng)建自定義服務的方法詳解
這篇文章主要介紹了AngularJS基于factory創(chuàng)建自定義服務的方法,結(jié)合實例形式分析了AngularJS使用factory創(chuàng)建自定義服務的具體步驟、操作技巧與相關(guān)注意事項,需要的朋友可以參考下2017-05-05
詳解Angular CLI + Electron 開發(fā)環(huán)境搭建
本篇文章主要介紹了Angular CLI + Electron 開發(fā)環(huán)境搭建，具有一定的參考價值，有興趣的可以了解一下2017-07-07
AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問題及解決辦法，有興趣的小伙伴可以參考下2016-09-09
這篇文章主要介紹了AngularJS壓縮JS的操作技巧,分析了AngularJS進行壓縮（minify）之后出現(xiàn)的問題與相應的解決方法,需要的朋友可以參考下2016-11-11