지시어 정의의 transclude 옵션을 이해하고 있습니까?

나는 이것이 angularjs의 지시어로 이해하기 가장 어려운 개념 중 하나라고 생각합니다.

http://docs.angularjs.org/guide/directive 의 문서 는 다음과 같습니다.

transclude- 요소의 컨텐츠를 컴파일하고 지시문에 사용 가능하게하십시오. 일반적으로 ngTransclude와 함께 사용됩니다. transclusion의 장점은 연결 함수가 올바른 범위에 사전 바인딩 된 transclusion 함수를 수신한다는 것입니다. 일반적인 설정에서 위젯은 분리 범위를 작성하지만 변환은 하위가 아니라 분리 범위의 형제입니다. 이는 위젯이 개인 상태를 가질 수있게하고, 변환이 상위 (사전 분리) 범위에 바인딩 될 수있게합니다.

• true-지시문의 내용을 대체합니다.
• 'element'-낮은 우선 순위로 정의 된 지시문을 포함하여 전체 요소를 변환합니다.

그것은 말한다 transclude일반적으로 사용 ngTransclude. 그러나 ngTransclude 문서의 샘플은 ngTransclude지시문을 전혀 사용하지 않습니다 .

이것을 이해하는 데 도움이되는 좋은 예가 필요합니다. 왜 필요한가요? 무엇을 해결합니까? 사용 방법?

요소에 myDirective 라는 지시문을 고려하면 해당 요소가 다른 내용을 둘러싸고 있습니다.

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

myDirective 가 템플릿을 사용하는 경우 내용이 <div my-directive>지시문 템플릿으로 대체되는 것을 볼 수 있습니다. 그래서 :

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

이 렌더링이 발생합니다 :

<div class="something"> This is my directive content</div> 

원래 요소의 <div my-directive> 내용이 손실 되거나 더 잘 대체됩니다. 따라서이 친구들에게 작별 인사를하십시오.

<button>some button</button>
<a href="#">and a link</a>

그래서, 당신은 유지하기 위해 무엇을하려는 경우 <button>...와 <a href>...는 DOM에? transclusion이라는 것이 필요합니다. 개념은 매우 간단합니다. 한 곳에서 다른 곳으로 콘텐츠를 포함합니다 . 이제 지시어는 다음과 같습니다.

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

이것은 렌더링됩니다 :

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

결론적으로, 지시문을 사용할 때 요소의 내용을 유지하려면 기본적으로 transclude를 사용하십시오.

내 코드 예제는 여기에 있습니다 . 당신은 또한 이것을 보고 혜택을 누릴 수 있습니다 .

AngularJS의 새 버전에서 위 동작의 변경 사항을 언급하는 것이 중요하다고 생각합니다. Angular 1.2.10으로 위의 결과를 얻으려고 한 시간을 보냈습니다.

ng-transclude가있는 요소의 내용은 추가되지 않고 완전히 대체됩니다.

위의 예에서 'transclude'로 달성 한 것은 다음과 같습니다.

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

그리고 아닙니다

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

감사.

TechExplorer의 말은 사실이지만 템플릿에 ng-transclude 속성을 가진 간단한 컨테이너 태그 (div 또는 span과 같은)를 포함시켜 두 컨텐츠를 모두 가질 수 있습니다. 즉, 템플릿의 다음 코드에는 모든 내용이 포함되어야합니다.

<div class="something"> This is my directive content <div class="something" ng-transclude></div></div>

위키에서 :

"컴퓨터 과학에서, 번역이란 전자 문서의 일부 또는 전부를 참조하여 하나 이상의 다른 문서에 포함시키는 것입니다."

나는 또 다른 사용을 추가하고 싶습니다. 그것은 그것이 부모와 자식 지시자의 컴파일 및 링크 함수의 실행 순서를 변경한다는 것입니다. 이것은 상위 DOM이 하위 DOM에 의존하기 때문에 상위 DOM보다 하위 DOM을 컴파일하려는 경우에 유용 할 수 있습니다. 이 기사는 더 깊이 있고 명확하게 설명합니다!

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives-part-2-transclusion/

업데이트 AngularJS와 1.6.6 문서는 이제 더 나은 설명이 있습니다.

Transclude는 다른 요소를 감싸는 지시문을 만드는 데 사용됩니다.

때로는 문자열이나 객체가 아닌 전체 템플릿을 전달할 수 있어야합니다. "대화 상자"구성 요소를 만들고 싶다고 가정 해 봅시다. 대화 상자는 임의의 내용을 감쌀 수 있어야합니다.

이렇게하려면 transclude 옵션 을 사용해야합니다 . 아래 예를 참조하십시오.

script.js

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
  };
});

index.html

<div ng-controller="Controller">
  <my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>

my-dialog.html

<div class="alert" ng-transclude></div>

컴파일 된 출력

<div ng-controller="Controller" class="ng-scope">
  <my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>

Transclude는이 옵션을 사용하여 지시문의 내용이 내부가 아닌 지시문 외부의 범위에 액세스 할 수있게합니다.

이것은 이전 예에서 설명되었습니다. script.js에 이름을 Jeff로 재정의하는 링크 함수를 추가했습니다. 일반적으로 {{name}}이 (가) Jeff 일 것으로 예상합니다. 그러나이 예에서 {{name}} 바인딩은 여전히 ​​Tobias입니다.

모범 사례 : transclude: true임의의 내용을 래핑하는 지시문을 만들려는 경우 에만 사용하십시오 .

transclude : true는 지시문의 템플리트 요소와 함께 지시문에 정의 된 모든 요소를 ​​추가하는 것을 의미합니다.

transclude : false 인 경우 이러한 요소는 최종 HTML 지시문에 포함되지 않으며 지시문의 템플리트 만 렌더링됩니다.

transclude : element 지시어 템플릿이 사용되지 않음을 의미합니다. 지시문에 정의 된 요소 만 html로 렌더링됩니다.

지시문을 정의 할 때 지시문을 E로 제한하고 페이지에 지시문을 추가하면

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.