angularjs - 保存后项目消失

Question

我创建了一个指令来显示数据。我可以将它包含在 ng-repeat 中并查看模型是否已连接。当我点击离开并返回页面时，数据会再次显示，并带有先前所做的更改。我使用 ngResources 从 API 加载数据。到目前为止，一切都很好:它按预期工作。

这是中断的部分:如果我在指令中将数据保存到 API，则该项目将从页面中消失(更具体地说，它的字段为空白)。其余项目保持原样。仅保存的一项更改。

这是指令:

.directive('action', function() {
    return {
        restrict: 'E',
        scope: {
            data:'=model'
        },
        templateUrl: 'modules/actions/view.tpl.html',
        replace: true,
        link: function(scope, element, attr) {
            scope.save = function() {
                console.log(" data to save:" + JSON.stringify(scope.data));
                scope.data.$save();
            }
        }
    };
})

与指令关联的 html 包括:

<p><input type="text" ng-model="data.assignee" ng-change="save()">

以下是该指令的使用方式:

<div ng-repeat="item in data">
  <action model="item" />
</div>

这是 fiddle这显示了额外的上下文。您可以看到处理一些假数据的基本指令。 API 调用的代码已被注释掉。

同样，当 scope.data.$save();行未注释。当 ng-repeat 中显示的项目尝试保存自己时，它会从显示的项目列表中消失，取而代之的是一个带有空白字段的项目。当我重新加载整个应用程序时，我看到 API 保存成功并且项目现在正确显示。

我怀疑正在发生的事情是保存调用对正确的项目进行操作，但不知何故用新的空白项目替换了更改的项目，这可能是由于原型(prototype)继承。然后保存导致对父范围的更新，它重新绘制列表并显示新的空白项。

有人可以澄清正在发生的事情以及如何解决它吗？

Answer 1

我认为您会发现对您的 $save() 的 HTTP 响应命令返回空数据。

这就是 $resource作品。当您调用 $save() ，它将(默认情况下)使用 HTTP POST 调用您的 REST 服务。响应应该是资源的服务器状态。然后将结果复制到您的对象。在这种情况下，我猜测您的 REST 服务正在返回一个空对象。

换句话说，如果你发送一个正文为 {name: 'foo'} 的 POST ，您希望服务器的响应类似于 {id: 44, name: 'foo', extraInfoServerCreated: 'bar'} .