Question

我正在尝试在AngularJS中的两个控制器之间共享数据。数据通过ajax调用加载。这在NavCtrl中工作正常但是当从CommonBoardService.getSharedData();调用DashboardCtrl时它返回null。我假设这是因为DashboardCtrl在CommonBoardService通过fetchBoards中的NavCtrl设置数据之前进行了调用。我正在努力想出一个解决方案来解决这个问题。任何帮助将不胜感激。

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

我们使用通知/订阅机制。您可以创建一个基本上具有订阅功能和通知功能的服务。然后你可以有一个控制器＆＃34;订阅＆＃34;一个事件，例如你可以调用它＆＃34; sharedDataLoaded＆＃34;，然后你有另一个控制器＆＃34;通知＆＃34;任何人都在听一个事件发生过。您使用$ 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变量。因此，首先启动哪个控制器并不重要。

Angular共享服务返回null到控制器

2 个答案: