简短问题：

Question

简短问题：

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

我认为AngularJS的指令是要走的路，但我不能把它固定下来。

长问题：

前传

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

它有2-3个属性，其序列化由“;”连接（如果缺少第三个则没有尾随“;”）
属性2和3是对象列表，并通过加入“，”来序列化。
对象的序列化只是它们的一个字符串属性，或两个在它们之间带有“x”。

所以我有一个构造函数（接受一个spec字符串）和一个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来设置自定义（反）序列化。

Answer 1

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

也应该很容易添加验证。

我试图让它从父作用域接受自定义序列化程序，但未能这样做。不确定。

AngularJS：自定义字符串序列化的双向绑定

简短问题：

长问题：

前传

实际长问题

观

1 个答案: