Question

我有一个函数，它使用$ http：

通过ajax获取一个对象数组

$scope.getArray = function(page) {
    return $http.get(page).then(function(data) {
        return data.data;
    });
};

我这样使用它：

$scope.array = $scope.getArray('somepage');

这段代码实际上有效，我在视图中有我想要的数据。

但是，我想在这个数组的末尾添加一些数据。我试过了

$scope.addToArray = function(newItem) {
    $scope.array.push(newItem);
};

但那没用。

任何想法如何做到这一点？感谢。

Answer 1

看起来你是在怀念这个承诺！

如果您希望能够摆弄从getArray返回的数据，那么您不应该为您的范围变量分配承诺。相反，改变getArray的工作方式：

$scope.getArray = function(page) {
    var propertyAccessor = $parse(page);
    return $http.get(page).then(function(data) {
        page.assign($scope, data.data);
    });
};

现在当你调用get array时，它会将数据数据加载到data属性中，你可以修改它（一旦它第一次运行）

$scope.getArray('somepage');

$scope.addToArray = function(page, newItem) {
   var propertyAccessor = $parse(page);
   propertyAccessor($scope).push(newItem);
}

$scope.addToArray('somepage', 'someValue');

我放了demo of this together here，它有你原来的实现（使用$ q模拟）和我的工作示例。

Answer 2

我选择了不同的方法来解决这个问题。不确定它是否更好但无论如何我都会把它放在这里。

(function(utility) {
    angular.module('app').

    service('data',['$q', function($q) {
      var deferred = $q.defer();
      var data = ['bla', 'bla'];

      //some async $http stuff being done resulting in deferred.resolve(data)

      utility.add = function(stuff) {
        data.push(stuff);
      };

      return deferred.promise;
    }]).

    service('dataService', [function() {

      return {
        add: function(data) {
          utility.add(data);
      };

  }]);
}({}));

基本上，任何对我的数组感兴趣的控制器都会注入data，而任何有兴趣在我的数组中添加内容的人都会注入dataService。然后我在utility对象上创建一个闭包，它包含一个add函数，用于将东西推入数组。这有效（至少在1.0.8上），因为promise保留了对原始数组的引用，并且在我更改原始数据时实际更新了已解析的值。

这样我的controller完全与$http分离，并且不必关心如何从服务器获取数据，它只是通过将其声明为依赖项来移交它，而且我可以完全控制添加内容的方式。我的数据也被缓存，因为服务是单例，而控制器不是。

在AngularJS中将项添加到承诺的数组中

2 个答案: