私のアプリは、Web サービスからのデータに基づいて動的フォームを生成します。
たとえば、Web サービスは [{Name:'Age',DataType:'Number'},{Name:'PhoneNumber',DataType:'Phone'}] を返す場合があります。
HTML では、フィールド リストは次のようにバインドされます。
<div ng-repeat="v in model.Variables">
<input type="text" ng-model="v.Value" dynamic-variable="{{v.DataType}}" />
</div>
DynamicVariable は attrs.DynamicVariable の変更を監視し (値はリンク中に変更されます)、型に基づいてカスタム アクションを実行するディレクティブです (たとえば、「Phone」データ型の場合、入力要素にマスクを適用します)。
タイプが「数値」の場合、いくつかの追加機能を持つ数値コントロールを作成するために、いくつかのスパンで既存の要素をラップする必要があります。
var minusButton = '<button type="button" class="button number-down">-</button>';
var wrapper = '<span class="number input margin-right"></span>';
var plusButton = '<button type="button" class="button number-up">+</button>';
element.attr('size', '3');
element.wrap(wrapper);
element.before(minusButton);
element.after(plusButton);
ただし、これはモデル バインディングを壊すようです。要素がさらに html でラップされると、モデルへの/からのバインディングは行われなくなります。同様に、 element.replaceWith() アプローチもバインディングを壊します。
なぜこれが起こるのか、または回避策は何ですか? ありがとう！