Question

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

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

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

var MyObject = function () {
    //stuff
}

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

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

    };

在这里，您可以看到我想将结果推送到数组，以便将其添加到屏幕上。但问题是在此之前DOM加载。

点击服务器的服务：

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

        }).success(function (data) {
            deferred.resolve(data);
        });
        return deferred.promise;
    }

REST服务添加到数据库，然后返回更新的对象我认为$ q.defer（）会导致DOM等待加载，直到返回结果，以便显示新添加的项目。

我错过了什么？

更新

我试过这样做，但我仍然遇到同样的问题。在DOM加载页面之前没有调用push调用，因此用户永远不会看到添加的项目。

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

        }).success(function (data) {
            return data;
        });

创建和使用对象的Html

<div ng-repeat="myObject in model.MyObjects" style="margin-bottom: 2%">
        //A table of myObjectData

    <button class="btn btn-success" ng-click="add()">Add My Object</button>
</div>

Answer 1

以下是Angular中发生的事情。

呈现初始html（也称为模板html）。
Angular boostraps，然后执行必要的绑定并更新视图。
Angular监视更改，如果数据发生变化，视图会自动更新。

将数组绑定到视图时，它会呈现可用内容。稍后在数组中添加一些新元素时，视图应自动更新。你不需要费心去创造自己的承诺

return $http...

在promise defer完成之前加载DOM

1 个答案: