javascript - AngularJS-链接后修改html元素

我的应用程序基于Web服务中的数据生成动态表单。

例如，Web服务可能返回：
[{名称：“年龄”，数据类型：“数字”}，{名称：“电话号码”，数据类型：“电话”}]

在html中，字段列表的绑定方式如下：

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

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

如果类型为“数字”，则我必须将现有元素包装在一些跨度中，以便创建具有某些其他功能的数字控件。

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（）方法也会破坏绑定。

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

最佳答案

我会使用角度指令来帮助我，而不是执行
我自己的动态dom视图。
在此示例中，ng-switch可能有用。

http://plnkr.co/edit/VykyIo

关于javascript - AngularJS-链接后修改html元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12734970/