Angularjs 使用contenteditable与ng模型在ng内重复？

这是我的问题： 我正在使用

ng repeat

创建

span

s的列表。 每个

span

都有

contenteditable

属性和

ng model

指令。 在我尝试向列表中添加新项之前，一切都按预期进行（包括双向数据绑定）

<div ng-repeat="item in list">
    <span ng-model="item.text" contenteditable></span>
</div>
<button ng-click="addItemToList"></button>

或

将新项添加到列表（推送或拼接）时，DOM会更新，但最后一项初始化为空，没有任何文本。模型列表中的最后一项也会清空，即使我特别推送了一个包含文本的元素

经过几次测试后，我注意到只有在修改后列表的长度变大时才会发生这种情况： 如果我尝试替换/修改/删除（而不是添加）列表中的某个元素，则效果良好。 我相信这与

contenteditable

元素在DOM中初始化的方式有关（我认为它们初始化为空，不知何故，模型也会清空）

以前有人遇到过这个问题吗？如果是，您是如何解决的/您找到了什么解决方法？

基于相关的

ngModelController

，似乎没有内置的对

contenteditable

元素双向数据绑定的支持，因为在plunkr示例中，他们编写了自己的

contenteditable

指令。您可能可以使用该版本的修改版本作为解决方法

这看起来是一个类似的问题，那里的

contenteditable

指令与示例中的

contenteditable

指令类似

我还发现，这可能会完成你想做的事情

编辑：我在上面的评论中发布了一个新版本的plunk：

---

在这个版本中，我添加了一个

contenteditable

指令，它似乎工作正常。它基本上是angular编写方式的派生，但我指出了它处理不同类型输入的位置（因为在本例中，它只是文本）以及它处理contenteditable元素甚至不会触发的事件的位置。我还更改了它，以便基于

element.html（）

而不是

element.val（）

更新

$viewValue

。您可能可以使用类似的解决方法

这个问题很老了，但我今天也遇到了同样的问题。（角度1.5）。我的解决方法是添加模糊更新选项：

，然后模型在初始化时停止变为空。我喜欢在很多地方使用模糊更新（解决了一些性能问题），所以这对我很好，不过这是一种技巧

我无法用angular 1.5重现这个问题。看看这个，你会发现一些修正你的功能。如果没有控制器的相关部件，很难判断问题出在哪里。请让我知道这是否有帮助。他问的是什么时候使用带有contenteditable跨度的ng模型，而不是在contenteditable跨度内放置绑定。我相信我在这里复制了它：@CShark是的，这是我的问题，您的plunker与我的代码类似，唯一的区别是当列表在页面刷新时初始化（列表不为空），span实际上包含列表的文本。只有在添加新项目时，新的

span

才会显示为空（始终是最后一个）。我无法在Plunker或JSFIDdle中复制它。我也研究了这个问题，并尝试了我能找到的所有自定义contenteditable指令（甚至尝试根据其他响应修改它们），但似乎没有任何效果。最后一个跨度始终初始化为空。我已经想出了一种hackish noobish的解决方法，但它并不能完全解决我的问题（我相信将来会出现更多的问题），我更新了我的答案，根据angular当前如何处理ng模型的输入元素来提供一种解决方法。@MariusVlas忘记标记你了，但我更新了我的答案。

$scope.addItemToList = function () {
    $scope.list.push({text: 'dummy text'});
}

$scope.addItemToList = function () {
    $scope.list.splice(1, 0, {text: 'dummy text'});
}