这是我的问题:
我正在使用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会更新,但最后一项初始化为空,没有任何文本。模型列表中的最后一项也会清空,即使我特意推送了包含文本的元素。
经过几次测试后,我注意到只有在修改后列表的长度更大时才会发生这种情况:
如果我尝试替换/修改/删除(不添加)列表中的元素,它可以正常工作。
我认为这与DOM中contenteditable
元素初始化的方式有关(我认为它们初始化为空,不知何故,模型也会清空)。
以前有人遇到过这个问题吗?如果是,您是如何解决的/您找到了哪些解决方法?
答案 0 :(得分:1)
根据与ngModelController
相关的angular docs,似乎没有内置支持与contenteditable
元素的双向数据绑定,如在plunkr示例中所示写了自己的contenteditable
指令。您可以将其修改版本用作解决方法。
它看起来与此question类似,而contenteditable
指令与angular docs示例中的contenteditable
指令类似。
我还发现this directive on github可以完成你想要做的事情。
修改:我在上面的评论中发布了新版本的插件:
https://plnkr.co/edit/v3elswolP9AgWHDIPwCk
在这个版本中,我添加了一个似乎正常工作的contenteditable
指令。它基本上是input[type=text]
directive以角度编写的方式的分支,但我拿出了处理不同类型输入的地方(因为在这种情况下它只是文本)以及处理事件的地方那些满足的元素甚至都没有开火。我也对其进行了更改,以便$viewValue
根据element.html()
而不是element.val()
进行更新。您可以使用类似的东西作为解决方法
答案 1 :(得分:0)
这个问题已经过时了,但今天对我来说也是同样的问题。 (角1.5)。我的解决方法是添加模糊更新选项:<td contenteditable data-ng-model="position.value" ng-model-options="{updateOn: 'blur'}"></td>
然后模型在初始化时停止变为空。我喜欢在许多地方使用模糊更新(解决一些性能问题)所以这对我有好处,但这是一种诡计。