자체 마감 태그 사용 시 AngularJS 요소 지시사항이 표시되지 않음
html 파일에 지시사항이 있습니다.
<add />
<back />
그리고 지시사항은 양식에 나와있습니다.
.directive('add', ['$window', ...
그리고.
.directive('back', ['$window',
이 정도면 잘 됩니다.
지시사항을 낙타 케이스로 변경하는 경우:
.directive('addPlayer', ['$window', ...
<add_player />
<back />
그리고.
<add:player />
<back />
반면에 잘 나타남
<add-player /> regular dash
<back />
표시만<add-player>이후의 내용은 모두 표시되지 않습니다.
왜 그런지 아시겠어요?
편집:
저도 똑같은 행동을 하고 있습니다.
http://plnkr.co/edit/cpP4c2TyZwv5Y4BrNUBb?p=preview
당신의 질문을 잠재우기 위해, 나는 Angular의 공식적인 성명을 인용하고 있습니다.JS팀: (sic)
html 사양이 정의하는 자체 closing 또는 void 요소는 브라우저 파서에 매우 특별합니다.독자적인 요소를 만들 수 없으므로 사용자 지정 요소의 경우 void가 아닌 요소를 고수해야 합니다(
<foo></foo>).각도는 변경할 수 없습니다.
- 이고르 미나르
출처 : https://github.com/angular/angular.js/issues/1953#issuecomment-13135021
Angular의 나머지 대화를 따릅니다.JS issue의 사용 가능성을 논의하는 페이지XHTML브라우저에서 허용 가능한 자체 closing 태그를 사용하여 컨텐츠를 전송할 수 있습니다.하지만 Angular에서는 완전히 지원되지 않습니다.JS.
HTML 규격에서는 무효가 아닌 요소에 대한 자체 닫기 태그를 허용하지 않습니다.
HTML 구문 규칙
요소에는 시작 위치를 나타내는 시작 태그가 있습니다.무효가 아닌 요소에는 종료 위치를 나타내는 종료 태그가 있습니다.
시작 태그는 정확히 다음 순서대로 다음 부분으로 구성됩니다.
- "<"자.
- 요소의 태그 이름입니다.
- 선택적으로, 하나 이상의 특성 앞에 하나 이상의 공백 문자가 있어야 합니다.
- 선택적으로, 공백 문자를 하나 이상 사용할 수 있습니다.
- 선택적으로, 요소가 공백 요소인 경우에만 존재할 수 있는 "/" 문자입니다.
- ">" 문자.
HTML5 사양에는 void 요소의 개수가 제한되어 있습니다.전체 목록은 다음과 같습니다.
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr.
정말 무슨 일이 일어나고 있는 거지?
브라우저의 파서는 사양을 들어야 합니다.무효가 아닌 요소 태그에 슬래시를 사용하는 것은 유효하지 않으므로 파서는 끝을 무시합니다./>,그리고.<back />수단<back>. 따라서 다른 요소가 작동하지 않도록 하는 첫 번째 요소를 닫지 않습니다.
Plunker에는 다음이 있습니다.
<body>
<back></back>
Self closing <back />
Self closing <back />
</body>
로 파싱되는.
<body>
<back></back>
Self closing <back>
Self closing <back>
</back>
</back>
</body>
그런 다음 지정합니다.template: '<button>back</button>'대신하는 당신의 지시에 따라back(그리고 그것은 자식들입니다) 지정된 HTML을 통해 다음과 같은 결과를 얻을 수 있습니다.
<body>
<back>
<button>back</button>
</back>
Self closing <back>
<button>back</button>
</back>
</body>
그럼 난 어쩌라는 거야?
사용하다<back></back>모든 사람들을 위해 그리고 그것은 잘 작동할 것입니다.또는 요소 특성을 사용할 수 있습니다.<div back="attr"></div>.
자세한 내용은 다음 토론을 참조하십시오.
- Q: HTML5에서 셀프 클로징 태그가 유효합니까?
- AngularJS - 자체 마감 태그가 있는 사용자 지정 지시문은 태그 형제를 캡처합니다.
- AngularJS - 자동 닫기 지시가 항상 렌더링되지는 않습니다.
최근에 똑같은 문제가 생겨서 자기닫기 태그를 사용하지 않아서 해결했어요. 시도해보세요.<add-player></add-player>자기 closing 버전 대신에.
지시문의 태그 이름에 대시가 있을 때 자동 닫기 태그가 작동하지 않는 이유를 모르겠습니다.과거에 빠르게 조사를 해보았지만 HTML/XHTML 쪽에서 아무것도 찾지 못했습니다.Angular의 버그/제한?
Angular v15.1.0은 이제 사용자 지정 요소의 자체 닫힘 태그에 지원이 추가되었습니다.
확인해보세요: https://github.com/angular/angular/blob/main/CHANGELOG.md
언급URL : https://stackoverflow.com/questions/18103183/angularjs-element-directives-not-displaying-when-using-self-closing-tags
'programing' 카테고리의 다른 글
| 스코프에 대한 각도 ng-init 패스 요소 (0) | 2023.11.07 |
|---|---|
| Mysql 도커 컨테이너가 계속 다시 시작되고 있습니다. (0) | 2023.11.07 |
| 가상 시스템에서 작동하지 않는 캐스케이드에서 삭제 (0) | 2023.11.07 |
| href와 on click to HTML 태그 모두 포함 (0) | 2023.11.07 |
| WordPress REST API가 등록되지 않는 사용자 지정 끝점 만들기 (0) | 2023.11.07 |