Angular JS Daten werden geladen Vor dem Laden der Seite

Question

Ich möchte Daten vor AngularJS Page Load laden. Ich benutze auch Bootstrap und JQuery zusammen mit Angualr. Hauptproblem ist, dass ich eine Tabelle auf der Seite habe und JQuery für die Paginierung und andere Filter einschließlich der Reaktionsfähigkeit verwendet habe.

Was ist nun passiert ist, dass die Seite lädt alle JQuery und später meine Daten kommen auf Seite und nichts funktioniert wie Paginierung etc. Ich folgende Abhilfe tun:

<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> 

I manuelle Verzögerung hinzugefügt JQuery zu warten, so dass Seite lädt ihre Daten vorher.

Kann jemand eine gute Lösung sagen, wie man sicherstellt, dass die Daten geladen werden, bevor HTML-Seite gerendert wird?

Answer 1

Dies ist nur eine mögliche Lösung. Sie könnten auch eine Direktive statt eines Controllers verwenden

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

Ich würde dringend empfehlen, jQuery für Ihre Paginierung zu verwenden. Es gibt andere Lösungen, die die Winkelmagie für Sie wie ui-grid, smart-table, etc. beibehalten. Diese erfordern ziemlich geringen Aufwand von Ihrer Seite.

Wenn Sie wirklich auf diesem Pfad bleiben möchten, können Sie mit der $routeProvider.when Lösung erhalten, was Sie wollen. Wenn die Route angefordert wird, führt der Auflösungsblock zunächst alle Versprechungen aus und wartet darauf, dass sie aufgelöst werden, bevor sie diese Route aufrufen. Resolve kann auch diese Daten in die Steuerung der Route passieren:

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

routeProvider

Answer 3

Sie benötigen eine jQuery-Code zu binden, mit kantigen in gewisser Weise. Hier ist die Direktive.

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

Dann nutzen ng-wenn latente für Ihr Element machen:

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

und dann $scope.hasData = true auf angemessenen Umfang in gegebener Zeit festgelegt (oder nur auf $ rootScope wenn dies akzeptabel ist). Ich hoffe es hilft!