2

短い質問:

<input type="text">文字列を編集するとモデルが更新され、その逆の方法で、オブジェクトのカスタム形式の文字列シリアル化を含むを作成する方法は?

AngularJS のディレクティブが最適だと思いますが、固定できません。

長い質問:

前編

アプリケーションの「マスター モデル」であるオブジェクトがあります。特定の形式の文字列にシリアル化できます。

  1. 2 ~ 3 個の属性があり、そのシリアル化は「;」で結合されます。(3 番目が欠落している場合、末尾の「;」はありません)

  2. 属性 2 と 3 はオブジェクトのリストで、これらを「,」で結合してシリアライズします。

  3. オブジェクトのシリアライゼーションは、文字列属性の 1 つにすぎないか、間に「x」を挟んで 2 つになります。

だから私はコンストラクタ(スペック文字列を受け入れる)とtoString関数を持っています。続く; 明確にするために後者:

World.prototype.toString = function() {
    var spec = [];

    spec[0] = this.version;
    spec[1] = this.layers.map(function(layer) {
        var c = (layer.c > 1) ? layer.c + 'x' : '';
        return c + layer.id; //e.g. 'T' or '2xT'
    }).join(',');

    //spec[2] in python: ','.join(option.id for option in options if option.checked)

    var options = this.options.filter(function(option) {
        return option.checked;
    });
    if (options.length > 0)
        spec[2] = options.map(function(option) {
            return option.id;
        }).join(',');

    return spec.join(';');
};

私が使用しようとしたディレクティブはこのように見えますが、$watch一度だけ起動します。

angular.module('layersApp', []).directive('spec', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch('world', function(val) {
                element.val(val.toString());
                console.log('object updated', element.val());
            }, true);
            element.blur(function(e) {
                scope.world = new World(element.val());
            });
        }
    };
});

実際の長い質問

私が欲しいのは、これを機能させる簡単な方法です。

<input type="text" data-ng-model="theWorld" spec>

上記のカスタムディレクティブはどこにspecあり、双方向バインディングを設定しています

見通し

これにより、一般的な「シリアライゼーション」ディレクティブが次のように使用されるようになると、すばらしいことです。

<input type="text" data-serialization="string2Foo, foo2String" data-ng-model="foo">

objectfooと関数string2Fooを検索し、foo2Stringカスタム (デ) シリアライゼーションをセットアップします。

4

1 に答える 1

3

コントローラーの$parsers$filtersを使用できると思います。ngModelこれを行う最も簡単な例を次に示します。 http://plnkr.co/edit/13PJN2

検証も簡単に追加できるはずです。

親スコープからカスタムシリアライザーを受け入れるようにしようとしましたが、失敗しました。それについてはわかりません。

于 2012-10-09T23:14:20.707 に答える