ng-transclude가 뭐죠?
stack Overflow에서 ng-transclude에 대해 논의하는 많은 질문을 보았지만, 그것이 무엇인지 평신도의 용어로 설명하는 사람은 없었습니다.
설명서의 설명은 다음과 같습니다.
트랜슬루션을 사용하는 가장 가까운 부모 디렉티브의 트랜슬루드된 DOM 삽입 포인트를 마크하는 디렉티브.
이것은 꽤 혼란스럽다.ng-transclude가 무엇을 의도하는지, 그리고 어디에 사용될 수 있는지 누군가가 간단한 용어로 설명할 수 있을까요?
트랜슬루드는 마크업에서 디렉티브에 삽입된 모든 것을 캡처하여 디렉티브의 템플릿에서 사용하도록(Where actually the ng-transclude is at) 각을 지정하는 설정입니다.자세한 내용은 지시문 설명서의 "다른 요소를 랩하는 지시문 작성" 섹션을 참조하십시오.
커스텀 디렉티브를 작성할 경우 디렉티브템플릿에서 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
시각화:
리액트 월드에서 온 사람들에게 이것은 리액트 같은 것이다.
이것은 일종의 산출량입니다.element.filength()의 모든 것이 렌더링되지만 특정 범위에서는 디렉티브 속성이 표시됩니다.
언급URL : https://stackoverflow.com/questions/24725399/what-is-ng-transclude
'programing' 카테고리의 다른 글
| Tymeleaf를 사용하여 스프링 모델에서 JavaScript 변수 설정 (0) | 2023.03.25 |
|---|---|
| TextField 높이 재료 UI 설정 (0) | 2023.03.25 |
| useEffect를 사용하면 첫 번째 렌더링에 효과 적용을 생략할 수 있습니까? (0) | 2023.03.25 |
| 리액트 기능 컴포넌트의 기능 화살표 또는 지방 화살표 (0) | 2023.03.25 |
| 다른 모듈에서 AngularJS 액세스 서비스 (0) | 2023.03.25 |