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 ...
随机推荐
- iOS中多线程知识总结(一)
这一段开发中一直在处理iOS多线程的问题,但是感觉知识太散了,所以就把iOS中多线程的知识点总结了一下. 1.基本概念 1)什么是进程?进程的特性是什么? 进程是指在系统中正在运行的一个应用程序. ...
- 利用免费cdn加速webpack单页应用
回顾现状 在之前的学习过程中,react单页应用经过webpack打包之后会输出大概如下的目录结构,它就是站点的所有前端组成了: 1 2 3 4 5 6 MacBook-Pro:output ba ...
- invalidate()和postInvalidate() 的区别及使用
Android提供了Invalidate方法实现界面刷新,但是Invalidate不能直接在线程中调用,因为他是违背了单线程模型:Android UI操作并不是线程安全的,并且这些操作必须在UI线程中 ...
- windows8建立局域网的方法
win8建立局域网的方法:1.首先笔记本有无线网卡且支持 虚拟WIFI ;2.按win+X键,选择"命令提示符(管理员)A"; 3.输入"netsh wlan set h ...
- [ASP.NET] 如果将缓存“滑动过期时间”设置为1秒会怎样?
今天编写了一个采用ASP.NET Caching的组件,在为它编写Unit Test的过程中发现了一个有趣的问题,接下来我通过一个简单的实例说明这个问题.我们在一个控制台应用中编写了如下一段程序,这个 ...
- MySQL半同步复制
从MySQL5.5开始,MySQL以插件的形式支持半同步复制.如何理解半同步呢?首先我们来看看异步,全同步的概念 异步复制(Asynchronous replication) MySQL默认的复制即是 ...
- Deque的部分成员函数 解析,关于这个类,百度有很多解析,唯独没有其函数介绍
函数 描述 c.assign(beg,end) c.assign(n,elem) 将[beg; end)区间中的数据赋值给c. 将n个elem的拷贝赋值给c. c.at(idx) 传回索引idx所指的 ...
- 虚拟机利用Host-only实现在不插网线的情况下,虚拟机与主机实现双向通信,实现ssh连接以及samba服务实现共享
为了不影响其他的虚拟网卡,我们在VMware下在添加一块虚拟网卡: 然后点击Next,选择连接方式: 点击Finish即可. 重新启动虚拟机,如果这是你手动添加的第一块虚拟网卡,那么应该是eth1. ...
- 附录A 编译安装Hadoop
A.1 编译Hadoop A.1.1 搭建环境 第一步安装并设置maven 1. 下载maven安装包 建议安装3.0以上版本(由于Spark2.0编译要求Maven3.3.9及以上版本),本次 ...
- javascript URL实现简易书签
简介 在HTML中,我们可以将js嵌入到script标签中,可以嵌入到行内代码中,也可以嵌入到src(href)中. 后者称作javascript URL.该方式的URL格式固定:javascript ...