각도 지시문이 잘못된 DOM 노드를 삽입합니다.

Question

많은 양식이있는 앱이 있습니다. 각 필드에는 여러 HTML 요소가 있으므로 양식을 깔끔하게 유지하기 위해 일부 지시문 (필드 유형 당 하나씩)을 추출 할 수 있다고 생각했습니다.

문제를 설명하기 위해 sample app을 만들었지 만 일관성없는 동작이 나타납니다. 샘플 앱에서는 <input />이 (가) <link /> 요소로 바뀝니다. 실제 응용 프로그램에서는 <input />이 DOM에서 완전히 제거됩니다. 나는 이것이 쉬운 것처럼 느껴진다. 왜 작동하지 않니?

Answer 1

귀하가 명시한 질문에 답변하려면 ng-transclude (으)로 말씀 하셨기 때문입니다. 그러면 태그의 내용이 원본 요소로 바뀝니다. 원래 요소는 내가 원하지 않는다고 생각합니다. 원래 내용이 레이블로 대신 삽입되기를 원했을 것입니다.

이 당신을 위해 무엇을 찾고있는 아마 :

<div class="form-group" > 
    <label for="{{htmlId}}" ng-transclude></label> 
    <input id="{{htmlId}}" class="form-control" type="text" ng-model="model" /> 
    <span ng-repeat="error in errors">{{error}}</span> 
</div> 

내가 레이블에 tranclusion를 이동했습니다. 이 방법이 작동하는 동안 일관된 API와 간단한 코드 만 있기 때문에 코드를 실제로 사용하지 않고 label 속성을 전달하는 스타일을 권장합니다. 기능면에서 동등하지만, 그래서 내가 너를 괴롭히지 않게해라.

또한 .js에도 몇 가지 오류가 있습니다. 첫째, 당신은 =가 개체에 대한 사용된다 (이 단순화이다), 방법을 전달하는 데 사용됩니다 &

scope: { 
    model: '=', 
    errors: '=' 
}, 

& 대신 범위에 =을 사용하고 싶습니다. model 및 errors은 개체이므로 =을 대신 사용하는 것이 좋습니다.

마지막으로, 귀하의 예제에서 귀하의 HTML 템플릿과 귀하의 지시어 템플릿은 동일한 이름을 가지고 있지 않습니다 ... 귀하의 .js에 여분의 's'가 있습니다. 그러나 이것은 아마도 플 런커에있는 것일뿐입니다. 귀하의 실제 애플 리케이션.