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有变化（比如删除了某张图），用这个指令也是会更新的，所以之前的白名单代码也是可以删掉的啦～