角度共享服务返回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变量。因此，哪个控制器首先启动并不重要。