AngularJS + $resource + ng-repeat

Question

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

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

我有一个可用的 $resource 并使用以下命令在控制器中发布我的帖子。

$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

当使用$resource api 调用的$promise 时，结果将直接传递给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);
    });
};

希望这会有所帮助。