directive문으로 html을 삽입을 할 때 삽입되는 template는 root엘리먼트는 하나여야 된다. root엘리먼트에 주석도 있으면 안된다. 왜냐하면 주석(comment)도 엘리먼트의 하나이기 때문이다.
참조 Error: error:tplrt Invalid Template Root
지시문이 템플리트 (또는 templateUrl)로 선언되고 대체 모드가 켜진 경우 템플리트에는 정확히 하나의 루트 요소가 있어야합니다. 즉, template 속성의 텍스트 또는 templateUrl에서 참조하는 내용은 단일 html 요소 내에 포함되어야합니다. 예를 들어, 단순히 blah <em> blah </ em> blah 대신 <p> blah <em> blah </ em> blah </ p>입니다. 그렇지 않으면 대체 작업으로 인해 단일 요소 (지시문)가 여러 요소 또는 노드로 대체되어 지원되지 않으며 실제로는 필요하지 않습니다.
definition이 있는 지시문의 예
myModule.directive('myDirective', function factory() { return { ... replace: true, templateUrl: 'someUrl' ... } });
URL someUrl에서 제공되는 템플릿입니다. 템플릿은이 템플릿의 div 요소와 같이 단일 루트 요소 만있는 html 조각이어야합니다.
<div><b>Hello</b> World!</div>
이 지시문에 사용할 잘못된 템플릿은 여러 루트 노드 또는 요소를 정의하는 템플릿입니다. 예를 들면 다음과 같습니다.
<b>Hello</b> World!
템플릿의 시작 또는 끝 부분에서이 주석이 발생할 수 있으므로 HTML 주석에주의하십시오. 다음 템플릿을 고려하십시오.
<div class='container'> <div class='wrapper> ... </div> <!-- wrapper --> </div> <!-- container -->
<!-container-> 주석은 두 번째 루트 요소로 해석되어 템플리트가 유효하지 않게합니다.
- AngularJS angular.copy 사용법, angular 복사 2019년 5월 17일
- AngularJS fromJson, toJson 사용법 2019년 5월 15일
- AngularJS에서 ng-style사용시 조건문 이용방법 2019년 4월 25일
- AngularJS에서 ng-style사용시 함수 이용방법 2019년 4월 23일
- AngularJS 동적 HTML, Function 추가 2019년 4월 15일
- AngularJS에서 팝업창 띄우기 2019년 4월 2일
- AngularJS 하나의 모듈에 factory 다중 등록 2018년 2월 26일
- AngularJS factory 예제 2018년 2월 26일
- AngularJS forEach ng-repeat 예제 2018년 2월 19일
- AngularJS $http, spring TEXT response 예제 2018년 1월 17일
- AngularJS selectbox 간단한 예제 2018년 1월 15일
- AnuglarJS forEach 예제 2018년 1월 12일
- AngularJS checkbox 제어 및 활성/비활성(ng-disabled) 예제 2018년 1월 8일
- AngularJS button 활성/비활성(ng-disabled) 예제 2018년 1월 8일
- AngularJS radio 활성/비활성(ng-disabled) 예제 2018년 1월 8일
- AngularJS $broadcast, $emit, $on 예제 2018년 1월 3일
- AngularJS – $watch $digest $apply Life Cycle 2017년 12월 26일
- AngularJS $watchCollection 2017년 12월 26일
- AngularJS $watchGroup 2017년 12월 26일
- AngularJS $watch 2017년 12월 26일
- AngularJS 반복문 ng-repeat 2017년 7월 22일
- AngularJS $timeout 2017년 7월 22일
- AngularJS Show/Hide, 보이기/숨기기 2017년 7월 16일
- AngularJS 라디오 버튼 제어 2017년 7월 16일
- AngularJS시작하기, Hello AngularJS 2017년 7월 15일