Angular JSデータロード前のページ読み込み

Question

AngularJS Page Loadの前にデータをロードしたい私はAngualrに沿ってブートストラップとJQueryを使用しています。主な問題は、私はページ上のテーブルを持っており、JQueryを使用してページネーションや応答性を含む他のフィルタを使用していることです。私はこの問題を回避する次のようにします

今、すべてのjQueryと後で私のデータはページと何になるのは、そのページのロードを何が起こったのかは、改ページなどのように動作します：

<script> 
     $(function() { 
     // document.body.style.overflow = 'hidden'; 
      setTimeout(
        function() 

         $('#example1').DataTable({ 
          "paging": true, 
          "lengthChange": false, 
          "searching": true, 
          "ordering": true, 
          "info": true, 
          "autoWidth": true, 
          "scrollX": true 
         }); 
        }, 500); 

     }); 
    </script> 

をするように私は、jQueryのを待つために、手動遅延を追加しましたページは前にデータを読み込みます。

ページHTMLがレンダリングされる前にデータがロードされていることを確認する方法はありますか？

Answer 1

これは単なる解決方法です。コントローラの代わりにディレクティブを使用することもできます。

angular 
    .module('app', []) 
    .factory('repository', function ($http) { 
     var loadData = function() { 
      return $http... ;//make http call here and return the promise 
     }; 

     return { 
      loadData: loadData 
     }; 
    }) 
    .controller('myCtrl', function (repository) { 
     repository.loadData().then(function(data) { 
      // use loaded data here 
      $('#example1').DataTable({ 
       "paging": true, 
       "lengthChange": false, 
       "searching": true, 
       "ordering": true, 
       "info": true, 
       "autoWidth": true, 
       "scrollX": true 
      }); 
     }); 

    }); 

Answer 2

jQueryをページングに使用することを強くお勧めします。あなたには、uiグリッド、スマートテーブルなど、あなたのために働く角度魔法を維持する他の解決策があります。

本当にこのパスを使いたい場合は、$routeProvider.whenの解決策であなたが望むものを手に入れることができるかもしれません。ルートが要求されると、resolveブロックはまず何らかの約束を実行し、そのルートに行く前にそれらが解決するのを待つ。 Resolveはまた、ルートのコントローラにそのデータを渡すことができます：

.when('/route', { 
    ..., 
    resolve: { 
     dataYouWant: function(DataGettingService) { 
      return DataGettingService.get(); 
     } 
    } 
}) 

routeProvider

Answer 3

あなたは何らかの方法で角度を使用してjQueryのコードをバインドする必要があります。ここでディレクティブを試してみましょう。

<div id="example1" ng-if="hasData" jquery-call-directive> ... </div> 

してから（これは許容可能である場合、または単に$ rootScopeに）適切な範囲で適切な時間に$scope.hasData = trueを設定します。

app.directive('jqueryCallDirective' , function() { 
    return { 
     link: function(scope, element, attrs) { 
      element.DataTable({ 
       "paging": true, 
       ... 
      }); 
     } 
    } 
}); 

その後延期あなたの要素に対してレンダリングした場合にNGを、使用しています。それが役に立てば幸い！