スクロール時に無限にスクロール、破棄、再作成する要素

Question

これは一般的な質問かもしれませんが、ここでは私の問題を専門家からアドバイスを受けたいと思います。

私のウェブページは、無限のスクロールを有するツリー（植生を意味する）を表す。ツリーの中央部分（画像）は反復的であり、反復回数は自分のデータソースに依存します。

したがって、データソースは、ツリー上に葉として表示されるユーザーレコードです。ツリーの各中央部、およびonClick Ajaxのリスナーを持っている各リーフのための正確n葉があります。

は、私は私がダウンしてユーザーがスクロールとしての私のコンテナに要素を追加することができ知っているが、問題は、たとえということですリストの一番上にある行は、ビューからスクロールするときに見えなくなりますが、それらは依然としてページの一部であり、依然としてリソースを消費します。したがって、Webアプリケーションが遅くなり、リスナーが正しく動作しなくなる可能性があります。

私は、要素が目に見えなくなって動的に破棄され、再び表示されるようになったら再作成するプラグインを探しています。

私はほとんど解決策を見つけました。angular ui-scroll directiveを適用する方法がわかりません。ここではcodepenですが、あなたのフォークは高く評価されます。

マイページが動的ロードすることなく、このように取り組んでいる：

foreach($leaves as $i=>$leaf) 
{ 
    if($i % NUM_OF_LEAVES == 0) 
    { 
     echo "<div class='tree-section'>"; 
     echo '<img class="part" src="'.Yii::$app->request->baseUrl.'/images/tree_center.png"/>'; 
      echo '<div class="leaves">'; 

      for($j = 0; $j<NUM_OF_LEAVES ; $j++) 
      { 
       if(isset($leaves[$i + $j])){ 
        //show leaf $leaves[$i + $j] 
       } 
      } 
      echo '</div>'; 
     echo '</div>'; 
     } 
    } 

Answer 1

ではなく、それは理想的であるプリレンダリングよりも、呼び出されたときに、あなたが必要とするデータを返すサービスを設定します。 Their service demoはget関数を提供していますので、このget関数をサーバに呼び出す$httpに置き換えて、必要なツリー部分だけを返すようにする必要があります（応答の改ページなど）。

本のテストされていない例が

angular.module('application', ['ui.scroll', 'ui.scroll.jqlite']) 
    .factory('datasource', ['$http', 
     function ($http) { 

      var get = function(index, count, success){ 
       // gets data from /datasourceapi/tree/?index=XXX <-- XXX is the offset from the beginning 
       return $http({ 
        url:'/datasourceapi/tree/', 
        method: 'GET', 
        params:{index: index} 
       }).then(function(response){ 
        return success(response); 
       }); 
      } 

      return { 
       get: get, 
      }; 
     } 
    ]);