지시적 정의의 트랜슬루드 옵션을 이해하고 있습니까?

지시적 정의의 트랜슬루드 옵션을 이해하고 있습니까?

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

http://docs.angularjs.org/guide/directive 에서 입수된 문서에는 다음과 같이 기재되어 있습니다.

transclude - 요소의 내용을 컴파일하여 디렉티브에서 사용할 수 있도록 합니다.일반적으로 ngTransclude와 함께 사용됩니다.변환의 장점은 링크 함수가 올바른 스코프에 미리 바인딩된 변환 함수를 수신한다는 것입니다.일반적인 설정에서 위젯은 분리 범위를 생성하지만 변환은 하위 항목이 아니라 분리 범위의 형제 항목입니다.이렇게 하면 위젯이 개인 상태가 되고 변환이 상위(사전 분리) 범위에 바인딩될 수 있습니다.

• true - 지시문의 내용을 초월합니다.
• '접근' - 낮은 우선순위로 정의된 지시어를 포함하여 전체 요소를 제외합니다.

it 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에서요?당신은 환골탈태라는 것이 필요할 겁니다.개념은 매우 간단합니다.한 장소에서 다른 곳으로 콘텐츠를 포함합니다.이제 지시사항은 다음과 같습니다.

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>. 

결론적으로 명령어를 사용할 때 요소의 내용을 보존하려면 기본적으로 트랜슬루드를 사용합니다.

코드 예는 여기 있습니다.여러분들도 이걸 보시면 좋을 것 같아요.

새로운 버전의 AngularJS에서 위의 동작의 변화를 언급하는 것이 중요하다고 생각합니다.저는 Angular 1.2.10으로 위의 결과를 얻기 위해 1시간을 보냈습니다.

ng-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>

감사해요.

TechExplector의 말은 사실이지만, 템플릿에 ng-transclude 속성을 가진 단순한 컨테이너 태그(div 또는 span 등)를 포함하면 두 가지 콘텐츠를 모두 얻을 수 있습니다.즉, 템플릿의 다음 코드는 모든 콘텐츠를 포함해야 합니다.

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

Wiki에서:

컴퓨터 과학에서 트랜슬루전(transclusion)이란 전자문서의 일부 또는 전부를 참조에 의해 하나 이상의 다른 문서에 포함하는 것을 말합니다.

다른 용도를 추가하고 싶습니다.그것은 부모지휘와 자녀지휘의 컴파일 및 링크 기능의 실행 순서를 바꾸는 것입니다.부모 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 옵션을 사용해야 합니다.아래의 예를 참조해 주세요.

---

script.discripts.discripts: 스크립트

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.displaces를 표시합니다.

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

my-dialog.dialog.displaces

<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>

---

트랜슬루드를 사용하면 이 옵션을 사용하여 지시문의 내용이 지시문의 내부가 아닌 외부 범위에 액세스할 수 있습니다.

이것은 앞의 예에서 설명하고 있습니다.이름을 Jeff로 재정의하는 링크 함수가 script.js에 추가되었습니다.보통 {{name}}은(는) 제프입니다.단, 이 예에서는 {{name}} 바인딩이 여전히 Tobias임을 알 수 있습니다.

베스트 프랙티스: 사용만transclude: true임의의 내용을 줄바꿈하는 지시문을 작성하려는 경우.

transclude: true는 디렉티브에 정의되어 있는 모든 요소를 디렉티브의 템플릿 요소와 함께 추가하는 것을 의미합니다.

transclude:false의 경우 이러한 요소는 디렉티브의 최종 html에 포함되지 않고 디렉티브 템플릿만 렌더링됩니다.

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

디렉티브를 정의할 때는 E로 제한하고 페이지에 추가할 때는 E로 제한해야 합니다.

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

언급URL : https://stackoverflow.com/questions/15296284/understanding-the-transclude-option-of-directive-definition