AngularJS + $ resource + ng-repeat

Question

我在按以下顺序执行一步时遇到问题：

1. 将数据发布到休息服务器并获得完整的记录作为回报。
2. 使用新记录更新网页。

我有一个工作资源，并使用以下内容在控制器中发布我的帖子。

$scope.update = function(newRecord) {
    //use resource called apiClient to POST a record to API server
    apiClient.save(newRecord).$promise.then(function(response) {           
         //attempt to add new complete record to list on the web page
         $scope.existingRecords.push(response.data);
    });
};

但是我的ng-repeat列表不会更新以反映新条目。我可以确认数组$ scope.existingRecords（它驱动我的ng-repeat）正在获得新的记录，但在DOM中没有任何乐趣。

我听说过几个选项，但我没有运气......

$scope.update = function(newRecord) {
    //use resource called apiClient to POST a record to API server
    apiClient.save(newRecord).$promise.then(function(response) {           
         //attempt to add new complete record to list on the web page
         $scope.existingRecords.push(response.data);
         //let's try to force an update
         $scope.$apply();
    });
};

给我一​​个错误....

  

错误：[$ rootScope：inprog] $ digest已在进行中

修改以解决摘要错误...

....
$timeout(function() {
    $scope.$apply();
});
....

运行没有错误，但也没有更新ng-repeat。

更新 新添加的记录添加：

$scope.existingRecords.push(response.data);

Firebug显示预先存在的和新的记录略有不同：

Resource { id="2", name="existing-record", more...}


Object { id="41", name="just posted via ajax", more...}

不确定它是否重要，也许我是以错误的方式将新记录添加到模型中？

Answer 1

您提到您已尝试$scope.apply()，但应该$scope.$apply();推送response.data后调用此内容应确保您的视图已更新。

Answer 2

使用$promise api调用的$resource时，结果将直接传递到then()函数。

因此，您必须将response.data改为data，如下所示：

$scope.update = function(newRecord) {
    // use resource called apiClient to POST a record to API server
    apiClient.save(newRecord).$promise.then(function(data) {           
        //attempt to add new complete record to list on the web page
        $scope.existingRecords.push(data);
    });
};

希望这有帮助。