124

AngularJSが実行できる興味深いことの1つは、特定のデータバインディング式にフィルターを適用することです。これは、たとえば、モデルのプロパティのカルチャ固有の通貨や日付の書式設定を適用するための便利な方法です。スコープに計算されたプロパティがあるのも良いことです。問題は、これらの機能のどちらも双方向のデータバインディングシナリオでは機能しないことです。スコープからビューへの双方向のデータバインディングのみです。これは、他の点では優れたライブラリの明白な省略のようです-または私は何かを逃していますか？

KnockoutJSでは、読み取り/書き込み計算プロパティを作成できます。これにより、プロパティの値を取得するために呼び出される関数と、プロパティが設定されたときに呼び出される関数のペアを指定できます。これにより、たとえば、カルチャ対応の入力を実装できました。ユーザーが「$ 1.24」と入力し、それをViewModelのfloatに解析して、ViewModelの変更を入力に反映させることができます。

これに似たものを見つけることができる最も近いものは、これを使用する$scope.$watch(propertyName, functionOrNGExpression);ことです。これにより、プロパティの変更時に関数を呼び出すことができます$scope。しかし、これは、たとえば、カルチャを意識した入力の問題を解決するものではありません。メソッド自体の$watched中でプロパティを変更しようとすると、問題に注意してください。$watch

$scope.$watch("property", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.property = Globalize.parseFloat(newValue);
});

（http://jsfiddle.net/gyZH8/2/）

ユーザーが入力を開始すると、入力要素は非常に混乱します。プロパティを2つのプロパティに分割することで改善しました。1つは未解析の値用で、もう1つは解析済みの値用です。

$scope.visibleProperty= 0.0;
$scope.hiddenProperty = 0.0;
$scope.$watch("visibleProperty", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.hiddenProperty = Globalize.parseFloat(newValue);
});

（http://jsfiddle.net/XkPNv/1/）

これは最初のバージョンからの改善でしたが、もう少し冗長でありparsedValue、スコープ変更のプロパティの問題がまだあることに注意してください（2番目の入力に何かを入力すると、parsedValue直接変更されます。上部の入力は変更されないことに注意してください）アップデート）。これは、コントローラーのアクションまたはデータサービスからのデータのロードから発生する可能性があります。

AngularJSを使用してこのシナリオを実装する簡単な方法はありますか？ドキュメントにいくつかの機能がありませんか？

4

1 に答える 1

231

これには非常に洗練された解決策があることがわかりましたが、十分に文書化されていません。

|表示用のモデル値のフォーマットは、オペレーターと角度で処理できますformatter。フォーマッターのリストだけでなく、パーサーのリストも含むngModelであることがわかります。

1.ng-model双方向のデータバインディングを作成するために使用します

<input type="text" ng-model="foo.bar"></input>

ngModel2.同じ要素に適用され、コントローラーに依存するディレクティブを角度モジュールに作成します

module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ...
        }
    };
});

3.linkメソッド内で、カスタムコンバーターをngModelコントローラーに追加します

function fromUser(text) {
    return (text || '').toUpperCase();
}

function toUser(text) {
    return (text || '').toLowerCase();
}
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);

4.新しいディレクティブをすでに持っている同じ要素に追加しますngModel

<input type="text" lowercase ng-model="foo.bar"></input>

これは、モデルでテキストを小文字に変換し、大文字に戻す作業例です。input

モデルコントローラーのAPIドキュメントには、他の利用可能なメソッドの簡単な説明と概要も含まれています。

于 2012-10-18T05:55:16.913 に答える