请教一个关于 ionic/cordova (或 AngularJS) 动态的创建 html 实现滚动时懒加载图片的问题

[my101du]

前端 html 页面关键代码：

<ion-content class="padding" lazy-scroll>
    <div id="test-div" ng-bind-html="outputHtml"></div>
</ion-content>

该 html 页面绑定的 Controller 通过 ajax 获取数据，返回值是段带有大量图片的 html ，然后用这段返回值(经过一定的处理)更新前端页面的绑定变量“ outputHtml ”，实现动态插入 html 并显示出来(这里因为最新的 AngularJS 不支持非标准的 html 元素属性，使用了 ngSanitize 确保 html 代码完整 )。

$scope.outputHtml = '';

$.ajax ({
……略

success: function (response ) {
    ……略
    $scope.outputHtml = $sce.trustAsHtml (htmlDetail );
    $scope.$apply ();
}
});

截止目前这一步，一切正常，能正常把所有图片都展示在 <div id="test-div"> 中。

后来通过监视浏览器的内存占用发现，因为这些图片都是一次性加载出来的，所以内存占用快速增加，并且会偶尔因为网速的问题，加载卡顿。

于是希望能实现“懒加载”。

通过使用这篇文章 SIMPLE DIRECTIVE TO LAZY LOAD IMAGES IN YOUR IONIC APP 说明的方法，对 <img> 标签的 src 属性进行了替换，并创建必须的新属性和值 image-lazy-src。

发现最后展示的 html 代码虽然如预期，但是“懒加载”完全没有生效。不管怎么滚动，这些图片都只显示 src 里的那个“占位图”，不会随着页面滚动而更新路径（使用 image-lazy-src 里的值）。

<div id="test-div" ng-bind-html="outputHtml" class="ng-binding">
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/123.jpg">&nbsp;</p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/456.jpg">&nbsp;</p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/789.jpg">&nbsp;</p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/111.jpg">&nbsp;</p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/2222.jpg">&nbsp;</p>
</div>

检查了几次代码，应该没有遗漏， js 调用、 app 声明都没有问题，浏览器也没有任何报错。

后来又查找到文章 AngularJS data bind in ng-bind-html?，说要用这样的方式输出 html ：就是不能让 img 的 src 在 html 代码的创建阶段就生成，而是要放入一个 $scope 变量中，让它能“感知数据更新”（好像是这个意思），于是我试着把图片的 src 全部用一个固定的 $scope.caption 来替换

//测试的路径
$scope.caption = 'http://test.com/xyz.jpg';

//替换原来 html 代码里 img 的 image-lazy-src 属性值
$(el ).attr ('image-lazy-src', "{{caption}}");

其他代码略……

$scope.outputHtml = $interpolate (htmlDetail )($scope );
$scope.outputHtml = $sce.trustAsHtml ($scope.outputHtml );
$scope.$apple ();

这样输出的 html 变成了(路径确实变了)

<div id="test-div" ng-bind-html="outputHtml" class="ng-binding">
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg">&nbsp;</p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg">&nbsp;</p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg">&nbsp;</p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg">&nbsp;</p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg">&nbsp;</p>
</div>

但是，还是无法实现滚动页面，图片会动态加载。

那么请问， ionic 下，大家有没有遇到成功的案例可以帮助我解答这个问题呢？ 是否我对 AngularJS 的理解不够，在某些代码的处理时间段有误？

谢谢大家。

——————————
补充一下：
因为每次加载的 html 结构不一样，会有很多其他的 html 标签混杂，还可能有大段的文本，所以无法用 ng-repeat 实现规划出 html 结构，只能每次动态组装 html 代码