angularjs ng-bind-html中的图片动态添加ng

最近接了个需求,要求将富文本中的图片增加点击查看大图以及保存功能,查看大图及保存功能是已有功能,所以只需要考虑将富文本中的图片增加ng-click事件。

看过源码就可以知道ng-bind-html指令实际上是调用了jQuery中的html()方法,所以即使在富文本中增加ng-click事件,也不会被ng监听到,并且文档巨多,也不可能一个一个去添加,所以比较理想的思路是通过指令来实现,动态将ng-click绑定到图片上,然后将修改过的html通过$compile服务进行编译，使其生效。

废话不多说，直接上代码：

angular.module('app',
    []
).directive('compileRichTextImg', function ($compile, oneImagePickService) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            console.log(element);
            setTimeout(function () {
                // 尝试了$watch,虽然会产生效果,但是会报错,所以这里使用setTimeout来做个延迟
                $(element).click(function(){
                    scope.$apply(function () {
                        var html = element.html($parse(attr.ngBindHtml)(scope));
                        // 找到el中的html
                        var content = html.html();
                        var reg = /<img[^>]*>/gi;
                        // 匹配出html中的src属性
                        var images = content.match(reg);
                        if (!isEmpty(images)){
                            for (var i = 0; i < images.length; i++) {
                                // 将ng-click事件拼接到html中
                                var image = images[i];
                                image.substr(0, image.indexOf(" "));
                                var first = image.substr(0, image.indexOf(' ') + 1);
                                var next = image.substr(image.indexOf(' '));
                                var final = first + 'ng-click="LnkImgShow($event)"' + next;
                                content = content.replace(image, final);
                                element.html(content);
                                // 编译dom,使其在angularjs的监听下
                                $compile(element.contents())(scope);
                            }
                        }
                    })
                });
                $(element).click();
            },0);
            /**
             * 点击查看大图方法
             * @param input
             * @constructor
             */
            scope.LnkImgShow = function (input) {
                var currentNum = 0;
                var imgList = [];
                imgList.push({url:input.currentTarget.src});
                oneImagePickService.showListImgNew(imgList, currentNum,'url','');
            };
        }
    }
});

LnkImgShow方法中调用oneImagePickService.showListImgNew的方法,该方法是封装好的查看大图,就不在这做展示了.