2

简短的问题：

如何以编辑字符串更新模型的方式创建<input type="text">包含对象的自定义格式字符串序列化的对象，反之亦然？

我认为 AngularJS 的指令是要走的路，但我无法确定它。

长问题：

前传

我有一个对象，它是我的应用程序的“主模型”。它可以序列化为特定格式的字符串：

  1. 它有 2-3 个属性，其序列化由“;”连接 （如果缺少第三个，则没有尾随“;”）

  2. 属性 2 和 3 是对象列表，并通过用“，”连接这些对象进行序列化。

  3. 对象的序列化只是它们的字符串属性之一，或者它们之间有两个“x”。

所以我有一个构造函数（接受规范字符串）和一个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">

它将查找对象foo和函数string2Foo并foo2String设置自定义（反）序列化。

4

1 回答 1

3

我认为您可以使用$parsers控制器$filters。ngModel这是执行此操作的最简单示例。 http://plnkr.co/edit/13PJN2

添加验证也应该很容易。

我试图让它接受来自父范围的自定义序列化程序，但没有这样做。不确定。

于 2012-10-09T23:14:20.707 回答