16

私はAngularJSを学んでいます。説明できないものに出くわしたり、説明（または解決策）を見つけることができません。

私は単純な AngularJS アプリを持っていて、<span contenteditable="true">a を値にバインドしようとしていますが、うまくいきません。例えば：

<!-- Works as expected -->
<input data-ng-model="chunk.value"></input>

<!-- Shows value, but doesn't bind - changes not reflected in model -->
<span contenteditable="true">{{chunk.value}}</span>

<!-- This is empty -->
<span contenteditable="true" data-ng-model="chunk.value"></span>

値を編​​集すると chunk.value が更新されるように、最後のスパンで双方向バインディングを使用するにはどうすればよいですか?

4

5 に答える 5

22

NGバインド！「span」での一方向バインディングには ng-bind を使用します。

例については、こちらを参照してください: https://docs.angularjs.org/api/ng/directive/ngBind

したがって、あなたの行は次のようになります。 <span contenteditable="true" ng-bind="chunk.value"></span>

この助けを願っています

于 2015-12-08T07:36:25.067 に答える
0

ng-modelと一緒に使用することを意図していませんspan。絶対に必要な場合は、このためのカスタム ディレクティブを作成できます。keydown,keyupこのディレクティブは、 に​​リスナーを設定しcontentEditable span、スコープ モデルを更新します ( 内$apply())。これにより、スパン コンテンツがモデルにバインドされます。

私はすぐにプランカーを作成しました。見てみな。<span>コンテンツをスコープ モデルに同期します。ブラウザー コンソールを開いて、何かを入力するたびにスコープ モデルの更新を確認します。

于 2014-05-07T21:27:15.857 に答える
0

アタッチされてng-model-options="{ getterSetter: true }"いる要素に動作を追加する。に追加するng-modelこともできます。これにより、その中のすべてに対してこの動作が有効になります。ng-model-options="{ getterSetter: true }"<form><input>s

例はngModel、デモページgetter/setterでの使用方法 を示しています

于 2015-04-10T14:44:46.127 に答える