私は e コマース サイトで作業しており、Angular を使用して製品詳細ページにウィジェットを作成しています。ブラウザーの HTML として最初にレンダリングされるものを制御することは非常に限られています。私のウィジェットで行う必要があることのほとんどは、期待どおりに機能しています。フォームに影響を与える Angular の式補間の副作用がありますadd to cart
。製品の各カラー バリエーションは、次のいずれかのような値でページに表示されHTMLOptionElement
ますinnerText
。
{{hex="000000";sizes=["S","M","L","XL","2XL"];name="Black";}}
または
{{hex="FFFFFF";sizes=["S","M","L"];name="White";}}
または
{{hex="323C88";sizes=["S","M","L","XL","2XL"];name="Royal";}}
Angular の初期化プロセスの最終結果は、これらのそれぞれが次のように変換されることです。
Black
またはWhite
またはRoyal
それぞれ
これにより、ユーザーは色の選択に対して読み取り可能な値を得ることができるため、問題ありません。副作用は、親HTMLFormElement
が送信ボタンを介して送信しなくなることです。そのクラス属性は、ng-pristine
およびを含むように変更されましたng-valid
。
ページが読み込まれるまで、このフォームの HTML を変更できないことに注意してください。
簡単なオーバーライドをハックしてフォームを送信できると確信していますが、角度の初期化へのプラグインに関する情報をもっと探しています。これまでに思いついた最高のものは、フォームをng-non-bindable
Java テンプレートでラップすることです。
<div ng-non-bindable>${MyAddToCartFormRendersHere}</div>
$interpolate
しかし、ページが読み込まれた後に自分で呼び出しを行う方法が必要になります。
これは機能しますが、もっと良い方法があるに違いありません。
AngularApp.directive("customInterpolation", function ($interpolate, $document) {
$document.find("option:contains('{{')").each(function(i,el){
var angEl = angular.element(el);
angEl.text($interpolate(angEl.text(),true));
});
フォームラッパーは次のようになります。
<div ng-non-bindable data-custom-interpolation>${MyAddToCartFormRendersHere}</div>
私のディレクティブは 1 回実行されますが、nonBindable ディレクティブのため、何か (リンク関数など) を返すことは役に立ちません。...もっと良い方法があるはずです。
これは、問題をよりよく説明するためのjsfiddleです。ngNonBindable
ディレクティブが周囲に適用されない限り、フォームは送信されないことに注意してください<div>
。