[angularjs] 지시어 정의의`대체`를 사용하는 방법?

Program / 글쓴이

이 문서 : http://docs.angularjs.org/guide/directive 에서 replace지시문에 대한 구성 이 있다고 말합니다 .

템플릿 -현재 요소를 HTML 내용으로 바꿉니다. 교체 프로세스는 모든 속성 / 클래스를 이전 요소에서 새 요소로 마이그레이션합니다. 자세한 내용은 아래의 구성 요소 만들기 섹션을 참조하십시오.

자바 스크립트 코드

app.directive('myd1', function(){
  return {
    template: '<span>directive template1</span>',
    replace: true
  }
});

app.directive('myd2', function(){
  return {
    template: '<span>directive template2</span>',
    replace: false
  }
});

HTML 코드

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

그러나 최종 페이지는 다음과 같습니다.

directive template1
directive template2

replace작동하지 않는 것 같습니다 . 내가 놓친 것이 있습니까?

라이브 데모 : http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

답변

transclude: true내부 내용을 추가하는와 혼동되고 있습니다.

replace: true지시문 템플릿의 내용이 지시문이 선언 된 요소 (이 경우 <div myd1>태그)를 대체 함을 의미합니다 .

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

예를 들어 없이 replace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

와 와 replace:true

<span class="replaced" myd1="">directive template1</span>

후자의 예에서 볼 수 있듯이 div 태그는 실제로 대체 됩니다.

답변

문서에 나와 있듯이 ‘replace’는 현재 요소가 지시문으로 대체되는지 여부를 결정합니다. 다른 옵션은 기본적으로 어렸을 때 그냥 추가되는지 여부입니다. plnkr의 소스를 살펴보면 replace가 false 인 두 번째 지시문의 경우 div 태그가 여전히 존재한다는 것을 알 수 있습니다. 첫 번째 지시문에서는 그렇지 않습니다.

첫 번째 결과 :

<span myd1="">directive template1</span>

두 번째 결과 :

<div myd2=""><span>directive template2</span></div>

답변

[True | False (기본값)]

효과

1.  Replace the directive element.

의존:

1. When replace: true, the template or templateUrl must be required.

답변

또한 실제 루트 요소와 함께 템플릿의 최상위 수준에 주석이 있으면이 오류가 발생했습니다.

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>

답변