angularjs - angularjs によって製品をストアに動的に追加する

Question

ストアの Web ページがあり、ユーザーが下にスクロールしたときに製品ブロックを追加したい (無限スクロールによる)。

サーバーからデータを取得して dom に追加するには、どの方法を使用すればよいですか?

上記のように、angularjs で無限スクロールを実装するためのこのフィドルを見ました(ユーザーがページの最後に到達すると loadMore() 関数が実行されます)。ブロックはストアの製品であり、すべてのアイテムは異なるスコープを持つ必要があります。

loadMore()問題は、スコープ内のデータを構造化し、関数内の ajax リクエストによってさらに項目を追加する方法がわからないことです。

私の製品テンプレート:

<section class="more-apps">
    <h1>More recommendations</h1>
    <div class="loadmore-these">
        <!-- ajax requests will load more instances of these three templates -->
        <div data-ng-include data-src="'products-template-1.html'"></div>
        <div data-ng-include data-src="'products-template-2.html'"></div>
        <div data-ng-include data-src="'products-template-3.html'"></div>
    </div>
</section>

すべてのサブテンプレート ファイルは次のようになりますが、いくつかの単純な違いがあります。

<section data-ng-repeat="i in [1,2,3,4]">
<h1 data-ng-bind-html="title"></h1>
    <div data-ng-bind-html="about"></div>
</section>

すべての製品には、(独自の?) 範囲内に異なる変数がtitleあります。about