지시어 정의의 '바꾸기'는 어떻게 사용합니까?

지시어 정의의 '바꾸기'는 어떻게 사용합니까?

이 문서에서는 http://docs.angularjs.org/guide/directive에 다음과 같이 기재되어 있습니다.replace디렉티브 설정:

템플릿 - 현재 요소를 HTML의 내용으로 바꿉니다.바꾸기 프로세스는 모든 속성/클래스를 이전 요소에서 새 요소로 마이그레이션합니다.상세한 것에 대하여는, 다음의 「컴포넌트 작성」섹션을 참조해 주세요.

javascript 코드

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 태그는 실제로 교체되었습니다.

설명서에 명시된 바와 같이 '바꾸기'는 현재 요소가 지시문에 의해 대체되는지 여부를 결정합니다.다른 옵션은 기본적으로 아이로 추가되는지 여부입니다.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. 

또한 실제 루트 요소와 함께 tn top level 템플릿에 코멘트가 있는 경우에도 이 오류가 발생하였습니다.

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

언급URL : https://stackoverflow.com/questions/15285635/how-to-use-replace-of-directive-definition