Angular에서 'true'를 변환하고 'element'를 변환하는 경우
언제 사용하면 좋을까요?transclude: 'true'그리고 언제transclude: 'element'에 대해 아무것도 찾을 수 없습니다.transclude: 'element'각진 문서에서는 꽤 혼란스럽죠
누군가 이것을 알기 쉽게 설명해 주었으면 합니다.각 옵션의 이점은 무엇입니까?그들의 진짜 차이점은 무엇입니까?
제가 발견한 것은 다음과 같습니다.
transclude: true컴파일 함수 내에서는 트랜슬루드 링크 함수를 사용하여 DOM을 조작하거나 임의의 HTML 태그 상의 ngTransclude 디렉티브를 사용하여 트랜슬루드된 DOM을 템플릿에 삽입할 수 있습니다.
그리고.
transclude: ‘element’이는 요소 전체를 초월하며 트랜슬루드 링크 함수가 컴파일 함수에 도입됩니다.범위가 아직 생성되지 않았으므로 여기서는 범위에 액세스할 수 없습니다.컴파일 함수는 스코프에 액세스 할 수 있는 디렉티브의 링크 함수를 만듭니다.transcludeFn을 사용하면 클론 요소(트랜스캡된 요소)를 터치하여 DOM 조작을 수행하거나 그 안에서 스코프에 바인드된 데이터를 사용할 수 있습니다.참고로 이것은 ng-repeat 및 ng-switch에서 사용됩니다.
transclude- 요소의 내용을 컴파일하여 지침에서 사용할 수 있도록 합니다.일반적으로 ngTransclude와 함께 사용됩니다.변환의 장점은 링크 함수가 올바른 스코프에 미리 바인딩된 변환 함수를 수신한다는 것입니다.일반적인 설정에서 위젯은 분리 범위를 생성하지만 변환은 하위 항목이 아니라 분리 범위의 형제 항목입니다.이렇게 하면 위젯이 개인 상태가 되고 변환이 상위(사전 분리) 범위에 바인딩될 수 있습니다.
true- 지침의 내용을 초월합니다.
'element'- 낮은 우선순위로 정의된 지시사항을 포함하여 요소 전체를 초월합니다.
트랜스코드: true
자, 당신이 '지시'라는 명령을 가지고 있다고 가정해봅시다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>
여기서, 그 자식을 포함한 요소 전체가 변환되어 명령에 사용할 수 있게 된다.
링크 후에는 어떻게 됩니까?
트랜슬루드 함수에 필요한 작업을 수행하는 것은 사용자의 지시에 따라 결정됩니다. ngRepeattransclude: 'element'따라서 스코프가 변경되었을 때 요소 전체와 해당 요소를 반복할 수 있습니다.내용만 되는 경우에는 태그의 태그의 내용을 그대로 사용할 수 .transclude: truengTransclude이 기능을 제공하는 디렉티브입니다.
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"
트랜스클루전(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>
언급URL : https://stackoverflow.com/questions/18449743/when-to-use-transclude-true-and-transclude-element-in-angular
'source' 카테고리의 다른 글
| AngularJS: 컨트롤러에서 특정 양식 입력 필드를 비활성화할 수 있습니까? (0) | 2023.02.26 |
|---|---|
| WooCommerce에서 결제 직후 주문 상태 변경 (0) | 2023.02.26 |
| Angular가 있는 배열 작성 방법JS의 ng-model (0) | 2023.02.26 |
| angularjs 이외의 웹사이트에서 어떻게 Extractor를 사용하는가? (0) | 2023.02.26 |
| Spring Boot에서 Logback이 기본 로깅 프레임워크인 이유는 무엇입니까? (0) | 2023.02.26 |