在 ng-repeat 中将 contenteditable 与 ng-model 一起使用？

Question

这是我的问题：我正在使用 ng-repeat 来制作 span 的列表。每个 span 都有 contenteditable 属性和 ng-model 指令。一切都按预期工作（包括双向数据绑定），直到我尝试将新项目添加到列表中。

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

方法如下所示：

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

或

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

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

经过几次测试，我注意到只有在修改后列表的长度变大时才会发生这种情况：如果我尝试 replace/modify/remove （不添加）列表中的一个元素，效果很好。我相信这与 contenteditable 元素在 DOM 中初始化的方式有关（我认为它们初始化为空，并且不知何故，模型也清空了）。

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

Answer 1

根据 angular docs 与 ngModelController 相关的内容，似乎没有内置支持与 contenteditable 元素的双向数据绑定，请参阅 plunkr例如，他们编写了自己的 contenteditable 指令。您可以使用它的修改版本作为解决方法。

它看起来是一个与此 question 类似的问题，那里的 contenteditable 指令看起来类似于 angular 文档示例中的 contenteditable 指令。

我还发现 this directive on github 可能会完成您想要做的事情。

编辑：我在上面的评论中发布了一个新版本的插件： https://plnkr.co/edit/v3elswolP9AgWHDIPwCk

在这个版本中，我添加了一个似乎可以正常工作的 contenteditable 指令。它基本上是 input[type=text] directive 在 angular 中的写法的衍生，但我去掉了它处理不同类型输入的地方（因为在这种情况下它只是文本）和它处理 contenteditable 元素甚至不会触发的事件。我还对其进行了更改，以便 $viewValue 基于 element.html() 而不是 element.val() 进行更新。您也许可以使用类似的方法作为解决方法

Answer 2

这个问题很老了，但今天对我来说也是同样的问题。 (angular 1.5)。我的解决方法是添加模糊更新选项：<td contenteditable data-ng-model="position.value" ng-model-options="{updateOn: 'blur'}"></td> 然后模型在初始化时停止为空。我喜欢在很多地方使用 update on blur（解决一些性能问题）所以这对我来说很好，但它是某种技巧。

在 ng-repeat 中将 contenteditable 与 ng-model 一起使用？

Using contenteditable with ng-model inside ng-repeat?

contenteditable

angularjs

angular-ngmodel