Question

我有一个模型用于保存我的数据：

var FuelProcessingModel = function (carrierService) {
    this.myArray = [];
};

该模型具有我从DB获取的MyObjects数组：

var MyObject = function () {
    //stuff
}

我使用REST调用更新此内容：

$scope.add = function () {
        var myObject = new MyObject();
        $scope.model.MyObjects.push(myObject);
        service.add(myObject);
    };

我使用服务命中服务器：

this.add = function (myObject) {
        $http({
            method: "POST",
            url: "theServer",
            data: myObject
        });
    }

REST服务只是添加到数据库中，它不会返回任何内容。我需要在更新完成后从数据库重新加载数据，以便我的记录现在拥有所有新关联的ID和相关数据。

我不能这样做：

window.location.reload();

用户首先从下拉列表中选择一个值，以决定他们开始看到的数据列表。我不能/不想将值传递给它，主要是因为它在自己的局部视图中，有自己的控制器，因为它在很多页面上使用。

我尝试过：

$scope.add = function () {
        //same as above
        //this
        service.get().then(function(result) { $scope.model.myArray = result.data; });
    };

显然，这里的问题是在DOM重新加载页面之前未完成承诺。所以用户看到自己在数组中添加了一个项目，它就消失了。

我是否希望在承诺完成后加载页面？（我怎么办？）我应该从REST服务返回更新的数据并重置当前值吗？（似乎是同样的承诺问题）

有一种我不了解的更好的做法吗？

更新

对于Bergi：

this.get = function (key) {
        return $http({
            method: "GET",
            url: "theServer" + key
        })
            .success(function (data) {
                return data;
            });
    }

Answer 1

我想你想把你的两个承诺联系起来：

$scope.add = function () {
    var myObject = new MyObject();
    $scope.model.MyObjects.push(myObject);
    return service.add(myObject).then(function() {
        return service.get();
    }).then(function(result) {
        $scope.model.myArray = result.data;
    });
};

和

this.add = function(myObject) {
    return $http({
//  ^^^^^^ return a promise here
        method: "POST",
        url: "theServer",
        data: myObject
    });
};

Answer 2

您可以将服务调用包装在延迟的承诺中，并在返回成功时从控制器重新启动数据。

$scope.add = function () {
    var myObject = new MyObject();
    $scope.model.MyObjects.push(myObject);
    service.add(myObject).then(function (response) {
       // here's where you'd do whatever you want to refresh your model
    }),
    function (err) {console.log(err);};
};

服务：

this.add = function (myObject) {

    var deferred = $q.defer();

    $http({
        method: "POST",
        url: "theServer",
        data: myObject,
        success: function (response) {
           deferred.resolve(err);
        },
        error: function (err) {
           deferred.reject(err);
        }
    });

    return deferred.promise;
}

Angular JS。承诺完成后刷新列表

2 个答案: