AngularJS - 链接后修改html元素答案

【问题标题】：AngularJS - Modifying html element after linkingAngularJS - 链接后修改html元素
【发布时间】：2012-10-04 20:02:04
【问题描述】：

我的应用根据来自网络服务的数据生成动态表单。

例如，网络服务可能会返回： [{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() 方法也会破坏绑定。

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

【问题讨论】：

标签： javascript model-view-controller angularjs

【解决方案1】：

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

http://plnkr.co/edit/VykyIo

【讨论】：

我同意，这将是一个更易于维护的解决方案。