AngularJS - 鏈接後修改html元素

Question

我的應用根據來自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（該值將在連接過程中發生變化）的變化，並根據類型（比如自定義操作，對'手機'數據類型，它將掩碼應用於輸入元素）。

如果類型是'數字'，那麼我必須包裹現有元素的某些跨度以創建一個具有一些附加功能的數字控件。

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（）方法也會中斷綁定。

任何想法爲什麼發生這種情況，或者什麼是解決方法？謝謝！

Answer 1

我會利用角度指令來幫助我，而不是實現我自己的動態dom視圖 。 在這個例子中，ng-switch可能會有用。

http://plnkr.co/edit/VykyIo