在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不能预览的问题的更多相关文章

  1. angularjs图片上传和预览 base64

    angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...

  2. 微信小程序H5预览页面框架(二维码不隐藏)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 微信小程序H5预览页面框架

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 微信小程序手机预览请求不到数据(最后一条不明所以)

    本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...

  5. JS微信网页使用图片预览(放大缩小)

    前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...

  6. 模拟微信上传图片(带预览,支持预览gif)

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

  7. 微信小程序-图片预览

    仅供参考: 1,wxml: <view class="foot" bindtap="previewImage">我的小程序码</view> ...

  8. 【前端】模拟微信上传图片(带预览,支持预览gif)

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

  9. 解决pdf打印预览中遇到特殊字符,导出失败问题

    本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处. 由于近日由于pdf中存在特殊字符导致导出失败,主要原因是"&"字符与freema ...

随机推荐

  1. 吐槽:基于PhoneGap开发移动项目

    目前,随着Google的Android手机和苹果的iphone手机的逐渐普及,越来越多开发者加入到移动应用开发的大军当中.其中,Android应用是基于Java语言基础上进行开发的,而苹果公司的iph ...

  2. vue中v-bind:class动态添加class

    1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...

  3. 创建 VXLAN - 每天5分钟玩转 OpenStack(111)

    前面我们讨论了 VXLAN 的理论知识,并且在 ML2 中完成了相关配置.今天将通过 Web UI 创建 vxlan100_net 并观察节点网络结构的变化. 打开菜单 Admin -> Net ...

  4. T-SQL:毕业生出门需知系列(七)

    第7课 创建计算字段 7.1 计算字段(格式化字段) 存储在数据库表中的数据一般不是应用程序所需要的格式,如: 1.需要显示公司名,同时还需要显示公司的地址,但这两个信息存储在不同的表列中. 2.列数 ...

  5. geotrellis使用(十四)导出定制的GeoTiff

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 需求说明 实现方案 总结 一.前言        最 ...

  6. mysql相关文章

    win7系统下如何配置php-Apache-mysql环境 Mac 可设置环境变量的位置.查看和添加PATH环境变量 Mac如何删除MySQL,Mac下MySQL卸载方法 mac+apache+php ...

  7. win7系统下如何配置php-Apache-mysql环境

    如何在win7系统下配置php环境呢,php+Apache+mysql都是在配置过程中必不可少的元素,php负责解析php代码,apache负责服务器端而mysql是数据交互的中转站. 那么如何将ph ...

  8. 《图解Spark:核心技术与案例实战》介绍及书附资源

    本书中所使用到的测试数据.代码和安装包放在百度盘提供 下载 ,地址为https://pan.baidu.com/s/1o8ydtKA 密码:imaa 另外在百度盘提供本书附录  下载 ,地址为http ...

  9. jQuery的事件模型

    前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型. jQuery的事件系统离不开jQuery的缓存系统. jQuery的第一代缓存是直接 ...

  10. maven 插件

    一直没注意看maven执行过程中的打印日志,今天突然发现一段话,说编译以及resource未指定编码,默认gbk.于是,百度了设置编码的方式: <plugin> <groupId&g ...