2014-02-11 8 views
25

Ich brauche wirklich einige Daten vor dem Bootstrapping angular geladen werden. Aus diesem Grund habe ich einen run Block erstellt/Innerhalb dieses run Blocks rufe ich eine Methode auf einem Dienst auf, die einige Daten vom Server lädt. Da es sich um einen asynchronen Aufruf handelt, wird JavaScript mit der Ausführung fortgesetzt, was zu einigen nicht definierten Objekten in meiner App führt.Warten auf ein Versprechen in einem Run-Block in Angular?

Ich arbeite mit Routen, aber es ist keine Option, mit der resolve Eigenschaft zu arbeiten.

Könnte jemand eine Lösung zur Verfügung stellen, um zu warten, bis ein Versprechen im run Block bereit ist?

EDIT:

Dank der gegebenen Antworten, ich habe es manuell gelöst durch Winkel Bootstrapping:

$(document).ready(function() { 
    $.ajax('/Data/GetDropdownData', {type:'POST'}).done(function (response) { 
     app.run(['ListService', function (ListService) { 
      ListService.setData(response); 
     }]) 

     angular.bootstrap(document, ["sma"]); 
    }) 
}) 
+0

promise.then (function (data) { $ rootScope.Daten = Daten; }); aber ich denke, es ist zu einfach ^^ und Sie sind nicht sicher, es in Ihrem Controller bereit zu haben – Whisher

+0

@Whisher Danke für die Antwort, aber das ist in der Tat keine Option. Ich brauche die Daten wirklich, bevor ich die App starte. – Martijn

+0

Vielleicht wäre das manuelle Bootstrapping also eine Option http://docs.angularjs.org/guide/bootstrap angle.element (Dokument) .ready (function() { angular.bootstrap (Dokument); }); –

Antwort

3

Wie würde ich es hier

setzen kommentiert können Sie versuchen, manual bootstrap

<script> 
    angular.element(document).ready(function() { 
     angular.bootstrap(document); 
    }); 
</script> 

In diesem Fall können Sie natürlich nicht cont Walzen und eckige Art, Daten zu erhalten. Ich denke, Sie müssten Ihre Daten von jQuery laden, Ihren eckigen in jquery Callback bootstrap und dann initialisieren Sie Ihre Scope-Variable mit Daten, die Sie von jquery erhalten haben.

+0

Markiert als Antwort, weil Fedor der erste war. – Martijn

2

Ich denke, dass die einzige Lösung manually bootstrap Ihre Anwendung ist. Vielleicht finden Sie etwas Hilfe in dieser Frage Delay Angular App Initialization und in diesem kleinen Artikel Manually bootstrapping AngularJS for asynchronous loading in Internet Explorer.

Wie im vorherigen Artikel erwähnt, eine manuelle Bootstrap zu tun:

angular.element(document).ready(function() { 
    angular.bootstrap(document, ["myApp"]); 
}); 

Seien Sie sicher, dass alle refences von ng-app in Ihrem HTML zu entfernen, um das Auto-Bootstrapping zu stoppen.

5

Sie möchten vielleicht this SO Frage anschauen - es zeigt, wie ein AngularJS-Dienst mit asynchronen Daten zu initialisieren.

Here ist ein Plunkr Beispiel aus dieser Frage zeigt die Verwendung von AngularJS-Dienste wie $ http, um die Konfiguration zu laden und dann weitere Initialisierung zu tun.

This Antwort hat eine große Erklärung und zeigt ein Beispiel für das DOM des Wartens wie diese zu laden (plunkr Beispiel aus dieser Antwort ist here):

angular.element(document).ready(function() { 
    angular.bootstrap(document); 
}); 
0

eine andere Lösung, da ich nicht ommit Teile meine Anwendung, aber ich muss immer noch warten, bis die Dinge geladen sind.

die Bootstrap-Richtlinie (nicht auf Twitter Bootstrap verbundenen):

myApp.directive('myBootstrap', function() { 
    return { 
    scope: { 
     promise: '=myBootstrap' 
    }, 
    template: '<div ng-if="ctrl.isReady" ng-transclude></div>', 
    controllerAs: "ctrl", 
    transclude: true, 
    controller: function($scope) { 
     var ctrl = this; 
     ctrl.isReady = false; 

     //else an array of promises can be filled by a service 
     $scope.promise.then(function() { 
      ctrl.isReady = true; 
     }); 
    } 
    }; 
}); 

und die damit verbundene plnkr: http://plnkr.co/edit/vx4aWS?p=preview

Verwandte Themen