7

angularの組み込み検証を正常に使用していた角度のあるフォームがあります。たとえば、次のマークアップを見てください。

<form name="numberForm" novalidate>
    <input type="text" required />
    <button type="submit">Submit</button>
</form>

ブラウザーが読み込まれると、入力フィールドは次のようにレンダリングされます (不要な属性が削除されます)。

<input class="ng-pristine ng-invalid ng-invalid-required" />

入力フィールドに値を入力すると、マークアップは次のようになります。

<input class="ng-dirty ng-valid ng-valid-required" />

これらすべてがうまく機能していました。次に、フォームのマスキング/入力フォーマットを実装するために、2 つの jQuery プラグインを実装しました: autoNumericとjQuery.maskedinputです。ng-pristine ng-invalid...これで、入力の元のクラスが変更されることはありません。また、モデルのバインディングも成功しないようです。

何か案は？

http://jsfiddle.net/ma44H/3/を作成しようとしましたが、それを機能させる方法がわかりません。

4

1 に答える 1

9

JQuery と Angular がうまく連携しない

チョコレートとピーナッツ バターを組み合わせるととてもおいしいのですが、AngularJSとJQueryを組み合わせると厄介です。私たちは皆、これを達成するために (さまざまな成功を収めながら) 試みてきました。

問題は、JQuery DOM操作がAngularJS Digest Cycleの外で機能することです。レッスンは通常、純粋な Angular を使用する方が優れているということです。

代替手段 #1: Angular UI

Angular-UI を試してください。すべての Angular 開発者が使用できるツールのセット。

実装したいマスクは、ui-maskディレクティブで実行できます。

日付マスクが欲しいですか？

    <input type="text" ng-model="date" ui-mask="99/99/9999" />

通貨マスク？

    <input type="text" ng-model="currency" ui-mask="$99999999.99" />

フォンマスク？

    <input type="text" ng-model="phone" ui-mask="1 (999) 999-9999" />

:

フィドルを見る

:

代替手段 #2: フィルター

Angular には組み込みのフィルターがあります。

通貨：

$filter('currency')(amount, symbol)

日にち：

$filter('date')(date, format)

JQuery の使用を主張しますか? angular-uiツールセットのjQuery Passthroughディレクティブを試してください。私はこのディレクティブを使用していませんが、興味深いオプションです:

$.fn.tooltip() のようなものを呼び出すには、単に ui-jq="tooltip" を実行します。関数の名前は同一でなければならないことに注意してください。これは、$.fn.slideUp() などの通常の jQuery コマンドでも機能します。

パラメータを渡すには、ui-options 属性を使用します。値は $scope コンテキストで評価され、関数に渡されます。デフォルトが設定されている場合、渡されたオプションはそれらを拡張します。文字列が渡された場合、デフォルトのオプションは無視されます。

uiJqConfig 内の名前空間にはディレクティブ名 jq を使用します。次に、ディレクティブを呼び出すたびにオプションを渡す必要がないように、その関数の名前 (ui-jq に渡されるのとまったく同じ) による各関数のサブ名前空間オプション。

于 2014-06-10T02:59:27.687 に答える