ng-repeatの中でng-modelでcontenteditableを使用していますか？

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> 

方法は次のようになります。リストに新しい項目（プッシュまたはスプライス）、DOMの更新が、最後の項目を追加する場合

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

または

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

テキストは一切ありません。モデルリストの最後の項目は、テキストが含まれている要素を特にプッシュしても空になります。

修正した後、リストの長さが大きい場合にのみこれが起こることに気付きました。 リスト内の要素を置き換える/変更する（追加しない）場合、正常に動作します。 これは、DOM内の要素contenteditableが初期化されていることと関係していると思います（空で初期化して、何とかしてモデルが空になると思います）。

誰もこの問題が発生しましたか？はいの場合、どのように解決しましたか/どのような回避策が見つかりましたか？

Answer 1

ngModelControllerに関連angular docsに基づいて、そこにビルトインされていないことを、彼らは自分のcontenteditableディレクティブを書いたplunkrの例のように見てcontenteditable要素と結合する双方向データのサポートと思われます。回避策として、その修正バージョンを使用することができます。

それはこのquestionと同様の問題になりそうだし、そこcontenteditableディレクティブは、角ドキュメントの例ではcontenteditableディレクティブに似ています。

また、あなたがしようとしていることを達成するかもしれないthis directive on githubが見つかりました。

編集：私が正しく動作しているように見えるcontenteditableディレクティブを追加しました。このバージョンでは https://plnkr.co/edit/v3elswolP9AgWHDIPwCk

：私は上記のコメントで掲示さplunkの新しいバージョンをしました。これは基本的にはinput[type=text] directiveがどのように書かれているのかを説明したものですが、さまざまなタイプの入力を処理する場所（この場合はテキストのみになります）と、contenteditable要素火事だって。また、element.val()の代わりに$viewValueがelement.html()に基づいて更新されるように変更しました。このようなものを回避策として使用できる可能性があります

Answer 2

問題は古いですが、それは今日私にとっては同じ問題でした。 （角度1.5）。私の回避策は、ぼかし更新オプションを追加することでした：<td contenteditable data-ng-model="position.value" ng-model-options="{updateOn: 'blur'}"></td>何とかして、モデルは、初期化時に空になるのを止めました。私は多くの場所でぼかしの更新を使用する（いくつかの演技の問題を解決する）ので、これは私のために良いですが、それはいくつかの種類のトリックです。