Reihenfolge der Ausführung in angularjs steuern

Question

Ich habe eine eckige App geerbt und muss jetzt eine Änderung vornehmen.

Als Teil dieser Änderung müssen einige Daten in einem Controller festgelegt und dann von einem anderen Controller verwendet werden. Also habe ich einen Service erstellt und ein Controller Daten in ihn schreiben lassen und ein Controller hat Daten daraus ausgelesen.

angular.module('appRoot.controllers') 

.controller('pageController', function (myApiService, myService) { 
    // load data from API call 
    var data = myApiService.getData(); 

    // Write data into service 
    myService.addData(data); 
}) 

.controller('pageSubController', function (myService) { 
    // Read data from service 
    var data = myService.getData(); 

    // Do something with data.... 
}) 

Allerdings, wenn ich data zu verwenden gehen in pageSubController es immer nicht definiert ist. Wie kann ich sicherstellen, dass pageController vor pageSubController ausgeführt wird? Oder ist das überhaupt die richtige Frage?

EDIT

Mein Service-Code:

angular.module('appRoot.factories') 

.factory('myService', function() { 
    var data = []; 

    var addData = function (d) { 
     data = d; 
    }; 

    var getData = function() { 
     return data; 
    }; 

    return { 
     addData: addData, 
     getData: getData 
    }; 
}) 

Answer 1

Wenn Sie möchten, dass Ihr Controller wartet, bis Sie eine Antwort vom anderen Controller erhalten. Sie können versuchen, die Option $broadcast in angularjs zu verwenden.

Im Seitencontroller müssen Sie Ihre Nachricht "dataAdded" übertragen und im pagesubcontroller müssen Sie auf die Nachricht mit $ scope. $ On warten und dann die "getData" -Funktion verarbeiten.

Sie können so etwas wie dies versuchen:

angular.module('appRoot.controllers') 
.controller('pageController', function (myApiService, myService,$rootScope) { 
    // load data from API call 
    var data = myApiService.getData(); 

    // Write data into service 
    myService.addData(data); 
    $rootScope.$broadcast('dataAdded', data); 
}) 

.controller('pageSubController', function (myService,$rootScope) { 
    // Read data from service 
    $scope.$on('dataAdded', function(event, data) { 
     var data = myService.getData(); 
    } 

    // Do something with data.... 
}) 

Answer 2

Ich würde Ihren Dienst ändern, um ein Versprechen für die Daten zurückzukehren. Wenn Sie gefragt werden, ob die Daten nicht festgelegt wurden, geben Sie einfach das Versprechen zurück. Später, wenn der andere Controller die Daten setzt, lösen Sie die vorherigen Versprechen mit den Daten. Ich habe dieses Muster verwendet, um die Caching-API-Ergebnisse so zu behandeln, dass die Controller nicht wissen oder sich darum kümmern, ob ich Daten von der API abgerufen oder nur zwischengespeicherte Daten zurückgegeben habe. Etwas Ähnliches, obwohl Sie möglicherweise ein Array ausstehender Versprechen halten müssen, die gelöst werden müssen, wenn die Daten tatsächlich gesetzt werden.