AngularJS - 링크 후 html 요소 수정

Question

내 앱은 웹 서비스의 데이터를 기반으로 동적 양식을 생성합니다.

예를 들어, 웹 서비스는 반환 할 수 있습니다 : [{이름 : '나이', 데이터 형식 : '수'}, {이름 : 'PHONENUMBER'데이터 형식 '전화'}]

html로에서

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

DynamicVariable이 attrs.DynamicVariable (값이 연결 중에 변경됩니다)에 대한 변경을 감시 내 지시하고, '들어, 유형 (예를 기반으로 사용자 지정 작업을 수행, 필드 목록은 다음과 같이 바인딩 Phone '데이터 유형, 입력 요소에 마스크 적용).

유형이 '번호'인 경우 몇 가지 추가 기능이있는 숫자 컨트롤을 만들려면 일부 범위에서 기존 요소를 래핑해야합니다. 요소가 모델에서 더 이상 발생에/더 바인딩, 더 HTML에 싸여 없습니다되면 -

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); 

그러나,이 모델 바인딩을 깰 것으로 보인다. 마찬가지로 element.replaceWith() 접근 방식은 바인딩을 끊습니다.

왜 이런 일이 발생했는지 또는 어떤 해결책이 될 수 있습니까? 감사!

Answer 1

내 자신의 동적 DOM 뷰를 구현하는 대신 각도 지시문을 사용하여 나를 도울 것입니다. 이 예에서는 ng-switch이 유용 할 수 있습니다. 동의

http://plnkr.co/edit/VykyIo