控制angularjs中的執行順序

Question

我繼承了一個角度應用程序，現在需要進行更改。

作爲此更改的一部分，某些數據需要在一個控制器中設置，然後從另一個控制器使用。所以我創建了一個服務，並有一個控制器將數據寫入其中，一個控制器從中讀取數據。

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.... 
}) 

然而，當我去使用data在pageSubController它始終是不確定的。

我怎樣才能確保 pageSubController之前執行？或者，這甚至是正確的問題？

編輯

我的服務代碼：

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

如果您希望您的控制器等到您收到來自其他控制器的響應。您可以嘗試在angularjs中使用$broadcast選項。

在頁面控制器中，您必須廣播消息「dataAdded」，並在pagesubcontroller中使用$ scope。$ on等待消息，然後處理「getData」函數。

你可以嘗試這樣的事情：

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

我會改變你的服務來回報對數據的承諾。當被問及時，如果數據尚未設置，只需返回承諾。稍後當另一個控制器設置數據時，解決數據的先前承諾。我用這種模式處理緩存API結果的方式，使得控制器不知道或在意我是從API中獲取數據還是僅返回緩存數據。與此類似的東西，儘管您可能需要保留一系列待處理的承諾，這些承諾在數據實際設置時需要解決。

function MyService($http, $q, $timeout) { 
    var factory = {}; 
    factory.get = function getItem(itemId) { 
    if (!itemId) { 
     throw new Error('itemId is required for MyService.get'); 
    } 
    var deferred = $q.defer(); 
    if (factory.item && factory.item._id === itemId) { 
     $timeout(function() { 
     deferred.resolve(factory.item); 
     }, 0); 
    } else { 
     $http.get('/api/items/' + itemId).then(function (resp) { 
     factory.item = resp.data; 
     deferred.resolve(factory.item); 
     }); 
    } 
    return deferred.promise; 
    }; 

    return factory; 
}