javascript - ajax-load后广播数据从服务到多个 Controller 的变化

Question

我有 Angular 服务，从服务器加载数据，一些 Controller 依赖于该服务(它们使用通过服务加载的数据)。但是数据是由ajax请求加载的(并且它是异步的)，并且 Controller 检索指向任何数组的指针，并且在ajax请求完成后它被另一个加载的数组替换。服务在数组上有实际的指针，而 Controller 没有。

以下是一些带注释的代码:

angular.module('someApp')
.factory('operationService', ['$http', function($http){
    // now, after app started, some controllers will receive pointer to this empty array
    var operations = [];

    $http.get('some-link').success(function(data){
        // controllers have some pointer to old array, but we replace variable
        // controllers have old array, not loaded from server
        operations = data;
    });
    return {
        // controllers will take pointer via this method
        getOperations: function () {
            return operations;
        }
    };
}])
.controller('SomeController', ['$scope', 'operationService', function($scope, opService){
    // here we receive empty array
    $scope.operations = opService.getOperations();
    // and sometimes, when ajax-request will be finished, we still have empty array :(
}]);

在 Angular 应用程序中随处拥有实际数据的“最佳实践”是什么？我知道，我可以用“splice”和“push”修改数组，但这是非常“肮脏”的方式。

Answer 1

有多种方法可以仅进行一次 http 调用，但是我只能通过我们此处使用的软件版本来执行此操作。

您可以使用 promise 或将您的http请求设置为仅发生一次。但是，http 设置仅适用于更高版本的 Angular。检查您的版本。

至于最佳实践使用堆栈允许的内容，没有一种方法可以做任何事情。异步操作的最佳实践包括(但不限于)回调、 promise 、HTTP 设置，以及最重要的 - 在当前堆栈配置中有效的内容。

下面的工厂代码使用自己的方式来管理相同数据的多个回调。第一次调用后，任何后续工厂调用都将命中回调堆栈并堆积起来，直到 HTTP 请求返回数据。然后每个回调将触发并获取数据。

angular.module('someApp').factory('operationService', ['$http', function($http){

  var callbackStack = [];
  var firstCallMade = false;
  var factoryServerData;

  return {
    getOperations: getOperations
  };

  function getOperations( ctrlCallback ){
    callbackStack.push( ctrlCallback );
    if( firstCallMade ){ return; }
    firstCallMade = true;
    getOperationsHttpRequest();
  };

  function getOperationsHttpRequest(){
    $http.get('some-link').success( factoryCallback );
  }

  function factoryCallback( operations ){
    // handle !operations here if you need to.
    factoryServerData = operations || null;
    callbackStack.forEach( giveCtrlCallbackResponse );
  }

  function giveCtrlCallbackResponse( ctrlCallback ){
    ctrlCallback( factoryServerData );
  }
}]);

通过在每个 Controller 中使用回调，您将确保您将获得 http 调用返回的任何内容。您仍然会得到一个空数组，但前提是服务器返回的是空数组，而不是因为 Controller 加载的异步问题。

.controller('SomeController', ['$scope', 'operationService', function($scope, opService){

  opService.getOperations( getOperationsCallback );
  // Now $scope.operations will wait until your server responds.

  function getOperationsCallback( response ){
    $scope.operations = response;
  }
}]);


.controller('SomeOtherController', ['$scope', 'operationService', function($scope, opService){

  opService.getOperations( getOperationsCallback );
  // Now $scope.operations will wait until your server responds.

  function getOperationsCallback( response ){
    $scope.operations = response;
  }
}]);

注意如果您使用嵌套 Controller ，则第一个 Controller 可以进行调用，然后将结果广播到所有嵌套 Controller 。你会用scope.$on....来捕获它。