Transular 'true'및 Angular에서 'element'를 포함하는 경우는 언제입니까?
언제 사용해야 transclude: 'true'언제 transclude: 'element'? 나는 transclude: 'element'각도 문서에서 아무것도 찾을 수 없으며 꽤 혼란 스럽습니다.
누군가가 이것을 간단한 언어로 설명 할 수 있다면 기쁠 것입니다. 각 옵션의 장점은 무엇입니까? 그들 사이의 실제 차이점은 무엇입니까?
이것이 내가 찾은 것입니다 :
transclude: true컴파일 함수 내에서 변환 연결 기능을 사용하여 DOM을 조작하거나 HTML 태그에서 ngTransclude 지시문을 사용하여 변환 된 DOM을 템플리트에 삽입 할 수 있습니다.
과
transclude: ‘element’이것은 전체 요소를 포함하고 변환 기능에 컴파일 기능에 도입됩니다. 범위가 아직 생성되지 않았으므로 여기에서 범위에 액세스 할 수 없습니다. 컴파일 함수는 범위에 액세스 할 수있는 지시문에 대한 링크 함수를 작성하고 transcludeFn을 사용하면 DOM 조작을 위해 복제 된 요소 (트랜잭션 된 요소)를 터치하거나 범위에 바인딩 된 데이터를 사용할 수 있습니다. 이 정보는 ng-repeat 및 ng-switch에서 사용됩니다.
에서 지침에 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이를 수행 하는 지시문 과 함께 사용할 수 있습니다.
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>
'Programing' 카테고리의 다른 글
| Eclipse Europa, Helios, Galileo의 차이점 (0) | 2020.05.23 |
|---|---|
| 인라인 블록 요소를 나머지 줄에 채우는 방법? (0) | 2020.05.23 |
| 그렇지 않은 경우 파이썬 == vs if! = (0) | 2020.05.23 |
| 모든 재귀를 반복으로 변환 할 수 있습니까? (0) | 2020.05.23 |
| 플롯 배경색을 변경하는 방법은 무엇입니까? (0) | 2020.05.23 |