각도 - 양식 입력 지시문을 사용할 때 양식 유효성 검사 문제

Question

모델 및 모델 속성을 기반으로 양식 입력을 생성하는 양식 입력 지시문을 작성하려고했습니다. 예를 들어 ,

1. 필드 이름은 입력 텍스트의 경우, 필드 목록 인 경우 입력 HTML 컨트롤을 반환 지시어,
2. 는, 그것은 선택 상자를 반환합니다 등

이러한 입력은보기에서 ng-repeat를 사용하여 생성됩니다. 입력은 범위의 모델에 바인딩됩니다. 이것은 잘 작동합니다. 그러나 양식 유효성 검사가 실패합니다. 즉 입력 컨트롤이 유효하지 않은 경우 기본 양식은 양식이 유효 함을 여전히 나타냅니다.

나는 문제를 설명하기 위해 간단한 plunkr을 뒀다 - http://plnkr.co/edit/R3NTJK?p=preview

참고 : 입력 이름 필드가 동적 범위 모델에서 생성 될 때 실제로 양식을 내포했다.

나는 지난 2 일 동안 이것을 잡으려고 노력했다. 그리고 이것은 정말로 나에게 열중하고있다.

나는 뭔가를 놓치고 있는지 잘 모르겠다.

일부 사람이 나를 도와 줄 수 있다면 정말 감사하겠습니다.

Answer 1

업데이트는 :

link: function linkFn(scope,elem,attr){ 
    var jqLiteWrappedElement = 
     angular.element('<input type="url" name="socialUrl" ng-model="social.url">'); 
    elem.replaceWith(jqLiteWrappedElement); 
    $compile(jqLiteWrappedElement)(scope); 
} 

Plunker : 다음 링크 기능을 사용하십시오.

이해가 안되는 이유로, replaceWith()은 $ compile을 호출하기 전에 실행해야합니다. 누군가가 이것이 왜 그렇게 설명 할 수 있다면, 우리는 그것을 고맙게 생각할 것입니다!

갱신 2 : 아래의 코멘트에, 아르 템은 연결 함수가 호출되기 전에 DOM을 수정해야하므로이 또한 작동하는지 언급 :

var myElem = angular.element('some html'); 
var linkFn = $compile(myElem); 
element.replaceWith(myElem); 
linkFn(scope); 

---

원래 답 :

대신 링크 기능, 귀하의 지시어에 템플릿을 사용하십시오 :

template: '<input type="url" name="socialUrl" ng-model="social.url">'