angularjs+微信,解决chooseImage不能预览的问题
在wx.chooseImage的success回调中直接进行数据绑定,却在ng-repeat时发现ng-src不加载微信localId的问题,类似wxLocalResource://imageid987654321123456789
经过调试,发现实际微信的localId被转化成unsafe:wxLocalResource://imageid987654321123456789了
然后尝试用$sce.trustAsResourceUrl('wxLocalResource://imageid987654321123456789')解决,可还是unsafe...
后来发现了$compileProvider,发现可以用imgSrcSanitizationWhitelist把微信那wxLocalResource加入白名单,然而并不匹配,阴差阳错把他改成wxlocalresource却匹配上了!
尴尬、正则没学好,不知道是怎么个原因,感觉像是safari的正则有问题。。
后面又被正则坑了,可能是浏览器或是我的问题,在iOS的微信里,https?竟然匹配不到https,加了白名单代码后,连https的图都加载不出来了,就换了个低档的写法,赶紧把这问题先解决了,没想到把这解决了之后,微信的localId图也给加载出来了~~~猜测微信最终还是会去拿localId去请求http图吧,代码大概就像下面这样写,把白名单搞一下,就可以愉快的输出微信的localId图啦!!!!
var app = angular.module('app', []).config( ['$compileProvider',function( $compileProvider ){
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(http|https|data|wxlocalresource):/);
}]);
但是!用安卓调试的时候。。。发现安卓是这么个套路:weixin://resourceid/xxxxxx 然而为此又改了以上白名单正则。。还是失败。最后还是写指令吧,指令如下:
app.directive('wxImg', function() {
return {
restrict:'E',
replace :true,
template:'<img src="">',
link: function(scope, elem, attr) {
$scope.$watch('per',function(nowVal){
elem.attr('src',nowVal);
})
}
};
});
使用方法如下:
<wx-img ng-repeat="per in localids"></wx-img>
我是在wx.chooseImage的回调里把localIds绑定给scope的localids了,这样直接src是可以避开angular的安全检测的,如果$scope.localids有变化(比如删除了某张图),用这个指令也是会更新的,所以之前的白名单代码也是可以删掉的啦~
angularjs+微信,解决chooseImage不能预览的问题的更多相关文章
- angularjs图片上传和预览 base64
angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...
- 微信小程序H5预览页面框架(二维码不隐藏)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序H5预览页面框架
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序手机预览请求不到数据(最后一条不明所以)
本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...
- JS微信网页使用图片预览(放大缩小)
前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...
- 模拟微信上传图片(带预览,支持预览gif)
一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...
- 微信小程序-图片预览
仅供参考: 1,wxml: <view class="foot" bindtap="previewImage">我的小程序码</view> ...
- 【前端】模拟微信上传图片(带预览,支持预览gif)
一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...
- 解决pdf打印预览中遇到特殊字符,导出失败问题
本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处. 由于近日由于pdf中存在特殊字符导致导出失败,主要原因是"&"字符与freema ...
随机推荐
- ScrollView 嵌套ListView、RecyclerView(持续更新)
ListView: 只要重写ListView或GridView的onMeasure()方法即可: @Override protected void onMeasure(int widthMeasure ...
- Android图片缓存之Glide进阶
前言: 前面学习了Glide的简单使用(Android图片缓存之初识Glide),今天来学习一下Glide稍微复杂一点的使用. 图片缓存相关博客地址: Android图片缓存之Bitmap详解 And ...
- PHP过滤各种HTML标签
$str=preg_replace("/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i&q ...
- MAT使用--转
原文地址: [1]http://ju.outofmemory.cn/entry/172684 [2]http://ju.outofmemory.cn/entry/129445 MAT使用入门 MAT简 ...
- 回忆:#define的用法
ANSI C规定:#前可以有空格或者tab,#和指令其余部分之间也可以有空格,可以出现在任何地方,作用域从定义处到文件结尾. 因为预处理开始前,系统会删除反斜线和换行符的组合,故可以把指令扩展到几个物 ...
- C语言 第八章 函数、指针与宏
一.函数 函数是一个包含完成一定功能的执行代码段.我们可以把函数看成一个"黑盒子", 你只要将数据送进去就能得到结果, 而函数内部究竟是如何工作的的, 外部程序是不知道的.外部程序 ...
- 千呼万唤始出来:Apache Spark2.0正式发布
我们很荣幸地宣布,自7月26日起Databricks开始提供Apache Spark 2.0的下载,这个版本是基于社区在过去两年的经验总结而成,不但加入了用户喜爱的功能,也修复了之前的痛点. 本文总结 ...
- 1Z0-053 争议题目解析481
1Z0-053 争议题目解析481 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 481.Which statement is true about a running sessi ...
- dsoframer 使用笔记
dsoframer是微软提供一款开源的用于在线编辑.调用Word.Excel.PowerPoint等的ActiveX控件. 1.层覆盖 如果需要在文档编辑区域上方覆盖一个div的话,z-index无效 ...
- Android开发中的menu菜单
复写onCreateOptionsMenu方法,当点击menu菜单时,调用该方法. @Override public boolean onCreateOptionsMenu(Menu menu) { ...