可以使用 ng-model 进行编辑

Question

我正在使用 contenteditable 指令（本次讨论之外的代码：https://github.com/angular/angular.js/issues/528）来更新我的模型。不过，我也想在后端进行更新（我正在使用 ngResource）。

我的模板循环遍历 person in people 并且每个人：

<span contenteditable ng-model="person.name" ng-blur="updatePersonName(person)">{{person.name}}</span>

我原以为那个人会是 blur 上的更新变量但是当我 console.log 人在 updatePersonName 时我得到奇怪的输出：

Resource {id: 1, name: "Bob the Builder", created_at: "2015-04-23T14:57:28.999Z", updated_at: "2015-04-28T11:42:05.701Z", $$hashKey: "object:4"…}
 $$hashKey: "object:4"
 created_at: "2015-04-23T14:57:28.999Z"id: 1
 name: "Bob the Builder With Modifications"
 updated_at: "2015-04-28T11:42:05.701Z"
 __proto__: Resource

注意名称之间的区别（此输出的第二部分是展开视图）

指令使用：

element.bind("blur", function() {
    scope.$apply(read);
});

当我在 Person 资源上调用 update 时，它会发送原始模型，但随后似乎会在本地更新模型，因此如果我进行其他修改，它会发送我的第一个更改并滞后迭代落后。

Answer 1

根据@PetrAveryanov 的评论，问题是 ng-blur 在模型更改之前触发（因此出现奇怪的输出）。然而，ng-change 仅在模型更新后触发（与 javascript 的 change 事件不同）。 S 解决方案很简单：

<span contenteditable ng-model="person.name" ng-change="updatePersonName(person)">{{person.name}}</span>

可以使用 ng-model 进行编辑

Contenteditable with ng-model

contenteditable

angularjs

angular-directive