角度共享服務返回null到控制器

Question

我想在AngularJS中的2個控制器之間共享數據。數據通過ajax調用加載。這可以在NavCtrl內正常工作，但是當從DashboardCtrl調用CommonBoardService.getSharedData();時，它將返回null。我假設這是因爲在CommonBoardService已通過在NavCtrl中設置數據之前DashboardCtrl正在撥打電話。我正在努力想出一個解決方案來解決這個問題。任何幫助，將不勝感激。

CommonBoardService.js

angular.module('EefApp').service('CommonBoardService', ['Restangular', function (Restangular) { 
    this.boards = null; 

    Restangular.setBaseUrl("/api"); 
    var baseBoards = Restangular.all("boards"); 

    this.fetchBoards = function() { 
    return baseBoards.getList(); 
    }; 

    this.setSharedData = function (boards) { 
    this.boards = boards; 
    }; 

    this.getSharedData = function() { 
    return this.boards; 
    } 
}]); 

NavCtrl.js

angular.module('EefApp') 
    .controller('NavCtrl', ['$scope', 'CommonBoardService', function($scope, CommonBoardService){ 

    CommonBoardService.fetchBoards().then(function(boards){ 
     $scope.allBoards = boards; 
     CommonBoardService.setSharedData(boards); 
    }, function(){ 
     console.log(res, "Error Has Occured"); 
    }); 

    }]); 

DashboardCtrl.js

angular.module('EefApp') 
    .controller('DashboardCtrl', ['$scope', 'CommonBoardService', function($scope, CommonBoardService){ 

    $scope.allBoards = CommonBoardService.getSharedData(); 

    }]); 

Answer 1

我們使用無tify /訂閱機制。您可以創建基本上具有訂閱功能和通知功能的服務。然後，您可以讓一個控制器「訂閱」一個事件，例如，你可以把它稱爲「sharedDataLoaded」，然後讓另一個控制器「通知」任何聽取事件發生的人。你使用$ emit服務來做到這一點。

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit

Answer 2

另一種方法是共享的承諾：

angular.module('EefApp').service('CommonBoardService', ['Restangular', function (Restangular) { 
    this.promise = null; 

    Restangular.setBaseUrl("/api"); 
    var baseBoards = Restangular.all("boards"); 

    this.fetchBoards = function() { 
    return baseBoards.getList(); 
    }; 

    this.setPromise = function (promise) { 
    this.promise = promise; 
    }; 

    this.getPromise = function() { 
    return this.promise; 
    } 
}]); 

NavCtrl.js

angular.module('EefApp') 
    .controller('NavCtrl', ['$scope', 'CommonBoardService', function($scope, CommonBoardService){ 

    if (!CommonBoardService.getPromise()) { 
     var promise = CommonBoardService.fetchBoards(); 
     CommonBoardService.setPromise(promise); 
    }; 

    CommonBoardService.getPromise().then(function(boards){ 
     $scope.allBoards = boards; 
    }, function(){ 
     console.log(res, "Error Has Occured"); 
    }); 

    }]); 

DashboardCtrl.js

angular.module('EefApp') 
    .controller('DashboardCtrl', ['$scope', 'CommonBoardService', function($scope, CommonBoardService){ 

    if (!CommonBoardService.getPromise()) { 
     var promise = CommonBoardService.fetchBoards(); 
     CommonBoardService.setPromise(promise); 
    }; 

    CommonBoardService.getPromise().then(function(boards){ 
     $scope.allBoards = boards; 
    }, function(){ 
     console.log(res, "Error Has Occured"); 
    }); 

    }]); 

每個控制器都會檢查是否已設置承諾。如果不是，則啓動XHR以獲取boards列表並設置承諾。然後他們使用promise來設置它們各自的$ scope變量。因此，哪個控制器首先啓動並不重要。