ここに私の問題があります: 私はng-repeat
を使用してspan
のリストを作成しています。 各span
には、contenteditable
属性とng-model
ディレクティブがあります。 新しいアイテムをリストに追加しようとするまで、すべてが期待どおりに動作します(双方向データバインディングを含む)。ng-repeatの中でng-modelでcontenteditableを使用していますか?
<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
が初期化されていることと関係していると思います(空で初期化して、何とかしてモデルが空になると思います)。
誰もこの問題が発生しましたか?はいの場合、どのように解決しましたか/どのような回避策が見つかりましたか?
角度1.5の問題を再現できませんでした。これをチェックしてくださいhttp://plnkr.co/edit/awim00mOk7M28uAGCnMo?p=previewあなたの機能にいくつかの修正があります。コントローラーから関連する部品に問題があるかどうかは分かりません。これが役に立ったら教えてください。 –
彼は、contenteditable spanでng-modelを使うときに、contenteditable spanの中にバインディングを入れないことを尋ねていました。私はここでそれを再現したと信じています:https://plnkr.co/edit/v3elswolP9AgWHDIPwCk – CShark
@CSharkはい、これは私の問題です。あなたのプランナーは私のコードと似ていますが、唯一の違いは、 (リストは空ではない)、 'span'は実際にリストのテキストを含んでいます。新しい項目を追加するときだけ、新しい 'span'は空(常に最後のもの)と表示されます。私はPlunkerまたはJSFiddleでそれを再現することはできません –