angularjs点击图片放大实现上传图片预览
更新时间：2017年02月24日 14:27:05 作者：zxj娟娟
这篇文章主要为大家详细介绍了angularjs点击图片放大实现上传图片预览的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了angularjs点击图片放大预览的具体代码，供大家参考，具体内容如下
承接上一篇文章
/*图片点击放大再点击还原*/
angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称，写在需要用到的地方img中即可实现放大图片</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";
})
}
}
});
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。这篇文章主要带着大家理解Angular数据双向绑定，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家介绍了Angular应用打包和部署实现过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
angular.js和vue.js中实现函数去抖示例（debounce）
这篇文章主要介绍了angular.js和vue.js中实现函数去抖示例（debounce）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章主要介绍了浅谈Angular HttpClient 简单入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了AngularJS实现的2048小游戏,可实现通过键盘W、S、A、D键控制上下左右移动进行游戏的功能,涉及AngularJS页面元素动态操作及数值运算等相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2018-01-01
本文主要介绍AngularJS包括的基础知识，这里整理了相关资料并附示例代码和实现效果图，有需要的小伙伴可以参考下2016-08-08
v-bind与{{}}都可以对数据进行绑定，接下来通过本文给大家介绍AngularJs模版与v-bind的相关知识，感兴趣的朋友一起看看吧2018-07-07
这篇文章主要介绍了AngularJS压缩JS的操作技巧,分析了AngularJS进行压缩（minify）之后出现的问题与相应的解决方法,需要的朋友可以参考下2016-11-11
这篇文章主要给大家深入的介绍了关于Angular.JS中Scope继承的相关资料，Angular。JS中scope之间的继承关系使用JavaScript的原型继承方式实现，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要给大家介绍了关于Angular变更检测的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
最新评论