angularjs에서 transclusion을 어떻게 사용합니까?

Question

John Lindquist 자습서에서는 transclusion을 사용하여 지시문에서 일부 내용을 가져 와서 원하는 위치에 넣습니다.

하지만 문서는 translude 함수에 대해 이야기하고이를 컨트롤러 및 컴파일 함수에 전달합니다. 그렇다면 transclusion은 무엇이며 어떻게 사용해야합니까?

Answer 1

egghead.io에 대한 Johns "Zippy Building"자습서는 내가 본적이있는 최고의 설명입니다. 두 문장 모두 옳았습니다. John은 예제를 제공하지만, 뒤에서 일어나는 일은 마크 업의 html이 템플릿과 컴파일러를 통해 놓이는 것입니다. 그의 튜토리얼에서, John은 실수로 템플릿의 내용을 남겨두고 angle의 컴파일러가 마크 업 html과 템플릿 html을 어떻게 연결하는지 볼 수 있습니다. 기본 지침을 만들 때

Answer 2

는, 트랜스 클루 전은 간단합니다 : 템플릿이 ngTransclude 지시자를 포함

module.directive('myTransDir', function() { 
    return { 
    transclude: true, 
    scope: true, 
    replace: true, 
    template: '<div><h1>Hello!</h1><div ng-transclude></div></div>', 
    }; 
}); 

때문에, 자동으로 나를 위해 내용을 transclude 것입니다. 나는이처럼 사용하는 경우 :

<div my-trans-dir> 
    <p>Some Content</p> 
</div> 

생성 된 HTML은 다음과 같습니다

<div> 
    <h1>Hello!</h1> 
    <div> 
    <p>Some Content</p> 
    </div> 
</div> 

Answer 3

@Josh 이미 ngTransclude 덮여. 이것은 중계를위한 "일반적인 사용 사례"입니다.

는 또한 문서에 이러한 진술에 대해 질문했다 :

컨트롤러 - 컨트롤러 생성자 함수 ... 컨트롤러는 다음과 같은 주민들과 주입니다
:
...
$의 transclude을 - 올바른 transclusion 범위에 미리 바인딩 된 transclude 링킹 함수 : function (cloneLinkingFn).

및

템플릿 DOM을 변화와 컴파일 기능 거래 ...
컴파일 함수는 다음 인수를 사용합니다.
...
transclude - 연결 기능을 transclude : function (scope, cloneLinkingFn).

나는 이러한 밀교 사용 사례를 고려합니다. 나는 개인적에서만 유래에 이들 중 하나 언급을 보았다, 나는 당신을 거기에서 참조 할 수 있습니다 :
What exactly do you do with the transclude function and the clone linking function?

견적을 @blesh에서 "트랜스 클루 전이 두 가지 방법이 모든 것을 제어 할 수있는 기능이 제공 할 수 있습니다 프로세스에 대한 프로그래밍 방식의 액세스를 통해 귀하를 소개합니다. "

업데이트 : 내 소개에 대해 좋은 blog post을 찾았습니다.