앵귤러에서 transclude 'true'와 transclude 'element'를 언제 사용해야합니까?

176

언제 transclude: 'true'그리고 언제 사용해야 transclude: 'element'합니까? 나는 transclude: 'element'각도 문서에서 아무것도 찾을 수 없으며 꽤 혼란 스럽습니다.

누군가가 이것을 간단한 언어로 설명 할 수 있다면 기쁠 것입니다. 각 옵션의 장점은 무엇입니까? 그들 사이의 실제 차이점은 무엇입니까?

이것이 내가 찾은 것입니다 :

transclude: true
컴파일 함수 내에서 변환 연결 기능을 사용하여 DOM을 조작하거나 HTML 태그에서 ngTransclude 지시문을 사용하여 변환 된 DOM을 템플리트에 삽입 할 수 있습니다.

과

transclude: ‘element’
이것은 전체 요소를 포함하고 변환 기능에 컴파일 기능에 도입됩니다. 범위가 아직 생성되지 않았으므로 여기에서 범위에 액세스 할 수 없습니다. 컴파일 함수는 범위에 액세스 할 수있는 지시문에 대한 링크 함수를 작성하고 transcludeFn을 사용하면 DOM 조작을 위해 복제 된 요소 (트랜잭션 된 요소)를 터치하거나 해당 범위에 바인딩 된 데이터를 사용할 수 있습니다. 이 정보는 ng-repeat 및 ng-switch에서 사용됩니다.

angularjs angularjs-directive angularjs-ng-transclude

— LauroSkr
소스

229

에서 지침에 AngularJS와 문서 :

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

true -지시문의 내용을 바꾸십시오.

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

막다 : 참

따라서 다음과 같이 my-transclude-true선언 된 선언 된 지시문이 있다고 가정하겠습니다 transclude: true.

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

컴파일 후 링크하기 전에 다음과 같이됩니다.

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

컨텐츠 (어린이)의 my-transclude-true어느되고 <span>{{ something }}</span> {{...,이 지침에 매개자 및 사용할 수 있습니다.

transclude : '요소'

로 my-transclude-element선언 된 지시문이있는 경우 transclude: 'element'다음과 같습니다.

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

컴파일 후 링크하기 전에 다음과 같이됩니다.

<div>
   <!-- transcluded -->
</div>

여기에서 자식을 포함 하여 전체 요소 가 바뀌어 지시문에 제공됩니다.

연결 후 어떻게됩니까?

그것은 transclude 함수와 관련하여 필요한 것을 수행하는 지시에 달려 있습니다. 범위가 변경 될 때 전체 요소와 하위 요소를 반복 할 수 있도록 ngRepeat사용합니다 transclude: 'element'. 그러나 태그 만 교체하고 내용을 유지하려는 transclude: true경우 ngTransclude이를 수행 하는 지시문 과 함께 사용할 수 있습니다.

— sirhc
소스

3

나는 그 made available to the directive진술을 놓쳤다 . 요소는 항상 지시문에 사용 가능합니다. 이것에 대해 자세히 설명해 주시겠습니까?

— guy mograbi

1

@guymograbi이 문장은 " 올바른 범위에 미리 바인딩 된 함수를 통해 지시어에 사용 가능"으로 이해 될 수 있습니다 .

— Michelle Tilley

하나의 단위는 '요소'와 같은 transclude로 지시문을 어떻게 테스트합니까? 나는 현재 그 문제로 어려움을 겪고 있습니다. 변환 된 후에는 요소에 액세스 할 수 없습니다.

— 체스터 리 바스

33

true로 설정되면 지시문은 원본 컨텐츠를 삭제하지만 ng-transclude라는 지시문을 통해 템플리트 내에 다시 삽입 할 수 있도록합니다.

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true
    };
});


<div directive-name>world</div>

브라우저 렌더링 : "Hello there world."

— 안드레 디온
소스

23

이것은 (사이의 차이에 대해이었다 모두의 질문에 대답하지 않습니다 transclude: true와 transclude: element)

— 재스퍼

1

또한 흥미로운 것은 브라우저 DOM이 지시문 뒤에 태그가 무엇인지, 그것이 읽은 것이 아니라 태그라는 것입니다.

— kontur

8

변환을 생각하는 가장 좋은 방법은 사진 프레임입니다. 사진 프레임에는 자체 디자인과 사진을 추가 할 공간이 있습니다. 사진 속으로 들어갈 사진을 결정할 수 있습니다.

각도에 관해서 우리는 범위와 종류의 컨트롤러를 가지고 있으며 그 안에는 transclusion을 지원하는 지시문을 배치 할 것입니다. 이 지시문에는 자체 디스플레이 및 기능이 있습니다. 번역되지 않은 지시문에서 지시문 내부의 내용은 지시문 자체에 의해 결정되지만 그림 프레임과 마찬가지로 변환으로 지시문 내부에 무엇이 있는지 결정할 수 있습니다.

angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"frame.html",
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
        },
        transclude:true


    }

});

지시문 내의 내용

<div class="well" style="width:350px;" ng-hide="hidden">

  <div style="float:right;margin-top:-15px">
    <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> 
  </div>
  <div ng-transclude>
    /*frame content goes here*/
  </div>
</div>

전화 지시

<body ng-controller="appController">
    <my-frame>
      <span>My Frame content</span>
    </my-frame>
  </body>

예

— 코드 -EZ
소스

아직도 나는 transclude를 이해하지 못했습니다. 이것을 설명하는 간단한 프로그램이 있습니까?

— Raja