0

私は 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-bindableJava テンプレートでラップすることです。

<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>。

4

1 に答える 1

0

を検出し、属性をform変更してを含むコンパイル関数を含むディレクティブを記述します。ディレクティブの compile 関数は、Angular がフォームをコンパイルする前に実行されます。action?

HTML:

<div modify-action>
  <form class="product-border product-gap addtocart" method="post" action="">

指令：

myApp.directive('modifyAction', function() {
    return {
        compile: function(element) {
            var form = element.find('form');
            console.log(form);
            form.attr('action', '?');
            console.log(form);
        }
    }
});

フィドル。送信をクリックすると、フォームが送信されたことがわかります。

于 2013-03-22T20:31:48.510 に答える