在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. Linux服务器常用操作

    Context 客户端:MacOS Terminal终端 服务器端:Linux v2.6 更新项目 进程 查看:ps -ef | grep * 杀死:kill -9 <pid> 数据库 备 ...

  2. IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法

    在 IOS 开发当中经常碰到 whose view is not in the window hierarchy 的错误,该错误简单的说,是由于 "ViewController" ...

  3. ClickOnce部署(5):自定义安全权限

    今天我们来探讨一下在ClickOnce部署中如何严格控制应用程序的权限. 演示应用 为了在下文中能更好地演示,我们先要做一个测试项目.也为了显得简单易懂,我使用最常用且最常见的WinForm项目,这是 ...

  4. 小谈MVC 模式

    MVC (Modal View Controler) 本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使 ...

  5. 【原创】开源Math.NET基础数学类库使用(17)C#计算矩阵条件数

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 上个月 ...

  6. MVC实用架构设计(三)——EF-Code First(5):二级缓存

    前言 今天我们来谈谈EF的缓存问题. 缓存对于一个系统来说至关重要,但是是EF到版本6了仍然没有见到有支持查询结果缓存机制的迹象.EF4开始会把查询语句编译成存储过程缓存在Sql Server中,据说 ...

  7. 通过3个Hello World应用来了解ASP.NET 5应用是如何运行的(1)

    微软在开发ASP.NET 5(当时被称为ASP.NET vNext)是采用的代号为Project K,所以运行时被称为KRuntime.KRuntime是一个SDK,它包含了编译和运行应用程序的所有资 ...

  8. 引用类型-RegExp类型

    JavaScript高级程序设计(第三版)笔记-第五章-RegExp类型 定义正则表达式有两种方式 1.用字面量形式定义正则表达式: ver expression = /patterns/flags; ...

  9. canvas的用法介绍

    目录 概述 绘图方法 图像处理方法 drawImage方法 getImageData方法,putImageData方法 toDataURL方法 save方法,restore方法 动画 像素处理 灰度效 ...

  10. EF Code First 主键对应多个外键

    这是一位朋友提出的疑问,EF 映射主键可以对应多个外键吗?如果外键设置级联删除会发生什么情况?下面做一个测试,示例实体代码: public class Blog { public Blog() { P ...