Warten, bis $ Ressource fertig in meinem Controller geladen wird, bevor Sie fortfahren

Question

Ich baue eine Ruhe-API mit forestbundle und ich verwalte das Frontend mit eckigen und Twig-Vorlage. Ein auf meiner URL-Adresse sieht wie folgt aus:

http://mywebsite/myroute/idContain 

Wenn ich die URL in meinem Browser, in einer Zweig Vorlage (Art html) zu laden, rufe ich den Parameter "idContain" (von einem fosrestbundle Controller comming) mit ng-init von AngularJS wie folgt aus:

<div class="container-fluid" ng-init="getContainByID({{ idContain }})"> 
    //...lot html div with angularjs directives 
</div> 

Und sofort, ng-init meiner AngularJS app gehen findet getContainByID (idContain), um sie auszuführen. Dieser sieht wie folgt aus:

angular.module("myApp", ["ngSanitize", 'angular.filter', 'ui.tinymce', ...]) 
.config(function($interpolateProvider, ...) { 
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); 
}) 
    .controller("myCtrl",function ($filter,..., myService) 
{ 
    // lot of code... 
    $scope.getContainByID = function(idContain) 
    { 

     $scope.currentContain = myService.getContains(idContain); 
     $scope.containRoot = $scope.currentContain.contain.containRoot; 
     ... 

    } 
    // lot of code... 
} 

Tatsache ist, dass, myService.getContains(idContain) aus meiner Ruhe Service kommen wie folgt aussehen:

angular.module("MyServiceRest", ['ngResource']) 

.factory("myService", function ($rootScope, $resource) { 


    var apiData = $resource(
     "/api", {}, 
     { 
      ... 
      "getContains": {method: 'GET', isArray: false, url: "mywebsite/api/myroute/:containid"} 
      ... 
     }); 

    return { 

     getContains: function (idContain) { 
      return apiData.getContains({containid: idContain}); 
     } 

    } 
}); 

Das Problem ist jetzt, wenn ich meine AngularJS App laufen, Umfang $ .containRoot wartet nicht, bis myService.getContains (idContain) (von meinem asynchronen $ Ressourcen-Dienst kommend) geladen wurde und verursachte Fehler beim Absturz meines Webapps.

Wie kann ich $ scope.containRoot und den Rest meines eckigen Codes auf "Warten" setzen, bis myService.getContains(idContain) (verbunden mit der API-Ressource) vollständig geladen ist, bevor Sie fortfahren?

Answer 1

$resource macht eine asynchrone Anfrage, aber erzeugt sofort ein leeres Objekt oder Array.

Es gibt zahlreiche Möglichkeiten, wie Sie mit Ihrem Problem umgehen können.

Man sollte sich keine Sorgen über die Erklärung $scope.containRoot machen und nur currentContain.contain.containRoot in der Ansicht verwenden. Diese Eigenschaft wird gerendert erhalten, nachdem die Anforderung

Ein weiteres empfangen wird, die $ Versprechen zu verwenden, die auch von $resource und weisen den Umfang Eigenschaft in Versprechen Rückruf

$scope.currentContain = myService.getContains(idContain); 

$scope.currentContain.$promise.then(function(){ 
     $scope.containRoot = $scope.currentContain.contain.containRoot; 
}); 

Ein weiterer Grund ist die Verwendung eines Routing-resolve zurück basiert auf dem gleichen Versprechen, so dass die Route (oder Zustand abhängig von Router) Noot ist nicht eingegeben, bis die Anfrage abgeschlossen ist