ng-transclude 란 무엇입니까?

266

ng-transclude에 대해 StackOverflow에서 많은 질문을 보았지만 평신도의 용어에 대해 설명하는 것은 없습니다.

설명서의 설명은 다음과 같습니다.

transclusion을 사용하는 가장 가까운 상위 지시문의 포함 된 DOM에 대한 삽입 점을 표시하는 지시문입니다.

이것은 상당히 혼란 스럽다. ng-transclude의 용도와 사용 위치를 간단한 용어로 설명 할 수 있습니까?

angularjs angularjs-directive transclusion

— 코드 위스퍼러
소스

기본적으로 특정 html 태그 또는 지시문에 삽입하는 내용에 대한 표시 점입니다. 지시어와 함께 사용하면 더 잘 이해할 수 있습니다.

— za

답변:

492

Transclude는 마크 업에 지시어 안에 넣어 캡처 모든 것에 각도 말해 어딘가를 사용하는 설정입니다 _{(실제로 어디 ng-transclude에서이다)} 지시어의 템플릿. 지시문 문서의 다른 요소를 감싸는 지시문 작성 섹션에서 이에 대해 자세히 알아보십시오 .

사용자 지정 지시문을 작성하는 경우 지시문 템플릿에서 ng-transclude를 사용하여 요소의 내용을 삽입 할 지점을 표시하십시오.

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

이걸 마크 업에 넣으면

<hero name="superman">Stuff inside the custom directive</hero>

다음과 같이 나타납니다.

슈퍼맨

사용자 지정 지시문 내의 내용

전체 예 :

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

시각화 :

— 벤 피셔
소스

이것은 공식 문서보다 훨씬 더 나은 설명입니다. 저것은 나의 머리를 아프게한다.

— Capaj

좋은 답변입니다! :) 귀하가 공유 한 링크는의 프로세스를 이해하는 데 도움이 transclude됩니다.

— Paulo Oliveira

Angular는 현재 가지고있는 문서 대신이 설명을 사용해야합니다.

— Jeremy W

@codeofnode angular의 컴파일 서비스는 다음과 같습니다. github.com/angular/angular.js/blob/…

— Ben Fischer

Stackoverflow 답변은 각 개념을 이해하는 가장 좋은 방법입니다

— sridhar ..

그것은 일종의 수율입니다. element.html ()의 모든 것이 거기에 렌더링되지만 지시문 속성은 여전히 특정 범위에서 볼 수 있습니다.

— 시부 니콜라 세자르
소스

내가 생각하는 최고의 대답은 완벽하지만 루비 배경에서 온다면 나는 yield좋은 비유처럼 보인다.

— Apie

@Apie 맞아, 나는 루비 배경에서 온다

— Sîrbu Nicolae-Cezar