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

Question

简短的问题：

如何创建包含自定义格式的对象字符串序列化的<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。

Answer 1

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

添加验证也应该很容易。

我试图让它从父作用域接受自定义序列化程序，但失败了。不太确定。