在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. iOS中多线程知识总结(一)

    这一段开发中一直在处理iOS多线程的问题,但是感觉知识太散了,所以就把iOS中多线程的知识点总结了一下. 1.基本概念 1)什么是进程?进程的特性是什么? 进程是指在系统中正在运行的一个应用程序.   ...

  2. 利用免费cdn加速webpack单页应用

    回顾现状 在之前的学习过程中,react单页应用经过webpack打包之后会输出大概如下的目录结构,它就是站点的所有前端组成了:   1 2 3 4 5 6 MacBook-Pro:output ba ...

  3. invalidate()和postInvalidate() 的区别及使用

    Android提供了Invalidate方法实现界面刷新,但是Invalidate不能直接在线程中调用,因为他是违背了单线程模型:Android UI操作并不是线程安全的,并且这些操作必须在UI线程中 ...

  4. windows8建立局域网的方法

    win8建立局域网的方法:1.首先笔记本有无线网卡且支持 虚拟WIFI ;2.按win+X键,选择"命令提示符(管理员)A"; 3.输入"netsh wlan set h ...

  5. [ASP.NET] 如果将缓存“滑动过期时间”设置为1秒会怎样?

    今天编写了一个采用ASP.NET Caching的组件,在为它编写Unit Test的过程中发现了一个有趣的问题,接下来我通过一个简单的实例说明这个问题.我们在一个控制台应用中编写了如下一段程序,这个 ...

  6. MySQL半同步复制

    从MySQL5.5开始,MySQL以插件的形式支持半同步复制.如何理解半同步呢?首先我们来看看异步,全同步的概念 异步复制(Asynchronous replication) MySQL默认的复制即是 ...

  7. Deque的部分成员函数 解析,关于这个类,百度有很多解析,唯独没有其函数介绍

    函数 描述 c.assign(beg,end) c.assign(n,elem) 将[beg; end)区间中的数据赋值给c. 将n个elem的拷贝赋值给c. c.at(idx) 传回索引idx所指的 ...

  8. 虚拟机利用Host-only实现在不插网线的情况下,虚拟机与主机实现双向通信,实现ssh连接以及samba服务实现共享

    为了不影响其他的虚拟网卡,我们在VMware下在添加一块虚拟网卡: 然后点击Next,选择连接方式: 点击Finish即可. 重新启动虚拟机,如果这是你手动添加的第一块虚拟网卡,那么应该是eth1. ...

  9. 附录A 编译安装Hadoop

    A.1  编译Hadoop A.1.1  搭建环境 第一步安装并设置maven 1.  下载maven安装包 建议安装3.0以上版本(由于Spark2.0编译要求Maven3.3.9及以上版本),本次 ...

  10. javascript URL实现简易书签

    简介 在HTML中,我们可以将js嵌入到script标签中,可以嵌入到行内代码中,也可以嵌入到src(href)中. 后者称作javascript URL.该方式的URL格式固定:javascript ...