1

我的应用程序根据来自 Web 服务的数据生成动态表单。

例如，Web 服务可能返回：[{Name:'Age',DataType:'Number'},{Name:'PhoneNumber',DataType:'Phone'}]

在 html 中，字段列表是这样绑定的：

<div ng-repeat="v in model.Variables">
    <input type="text" ng-model="v.Value" dynamic-variable="{{v.DataType}}" />
</div>

DynamicVariable 是我的指令，它监视 attrs.DynamicVariable 上的更改（链接期间值将更改），并根据类型执行自定义操作（例如，对于“电话”数据类型，它将掩码应用于输入元素）。

如果类型是“数字”，那么我必须将现有元素包装在一些跨度中，以便创建具有一些附加功能的数字控件。

var minusButton = '<button type="button" class="button number-down">-</button>';
var wrapper = '<span class="number input margin-right"></span>';
var plusButton = '<button type="button" class="button number-up">+</button>';
element.attr('size', '3');
element.wrap(wrapper);
element.before(minusButton);
element.after(plusButton);

然而，这似乎破坏了模型绑定——一旦元素被包裹在更多的 html 中，就不再发生与模型的绑定。同样， element.replaceWith() 方法也会破坏绑定。

知道为什么会发生这种情况，或者可能有什么解决方法吗？谢谢！

4

1 回答 1

2

我会使用角度指令来帮助我，而不是实现我自己的动态 dom 视图。在这个例子中，ng-switch可能有用。

http://plnkr.co/edit/VykyIo

于 2012-10-05T00:19:12.723 回答