왜 ng-transclude의 범위가 지시문의 범위의 하위 항목이 아닌가? - 지시문에 분리된 범위가 있는 경우?
지시가 주어짐)container1
트랜슬루드 및 격리 스코프가 있는 경우 디렉티브가 링크되면 다음 스코프가 있습니다.
Scope 004 <-- scope of the body
Scope 005 <-- scope of directive container1
Scope 006 <-- scope of the ng-transclude
예상:
Scope 004 <-- scope of the body
Scope 005 <-- scope of the directive
Scope 006 <-- scope of the ng-transclude
같은 디렉티브가 격리된 스코프가 아닌 공유 스코프를 가지는 경우는, 예상한 결과를 얻을 수 있습니다.
변환된 내용에 다른 지시문이 포함되어 있는 경우 문제가 발생합니다.component1
)의 경우, 다음과 같이 됩니다.
Scope 004 <-- scope of the body
Scope 005 <-- scope of the directive
Scope 006 <-- scope of the ng-transclude
Scope 007 <-- scope of directive component1
다음과 같은 지시어를 사용합니다.
<container1>
<component1 data="objectExposedInContainer1"/>
</container1>
하지만 그건 통하지 않아, 안에서는component1
,$scope.data
이undefined
왜냐면objectExposedInContainer1
가 올바른 범위에 있지 않습니다.
두 가지 질문이 있습니다.
- 왜죠
ng-transclude
디렉티브에 분리된 범위가 있는 경우 디렉티브 범위의 하위 항목이 아닐 수 있습니까?이거 버그예요? - 버그가 아니라면 컨테이너 디렉티브가 데이터를 콘텐츠에 전달하려면 어떻게 해야 합니까?만약 내가 시도했던 것과 같은 속성을 설정하지 않았다면 말입니다.
다음으로 동작하지 않는 예를 제시하겠습니다.http://plnkr.co/edit/NDmJiRzTF9e5gw8Buht2?p=previewPlunker는 Anguar를 기반으로 구축되어 있기 때문에 Batarang을 사용하여 디버깅하는 것은 어렵습니다.코드를 로컬로 다운로드하는 것을 추천합니다.코멘트 아웃line 10
- 아니, 아니에요! - 왜요?app.js
공유 스코프를 사용하여 동작하도록 합니다.
ng-transclude의 범위가 디렉티브의 범위에 속하지 않는 이유는 무엇입니까?
ng-transclude
디렉티브는 임의의 콘텐츠로 동작하도록 설계되어 있으며, 격리된 스코프는 디렉티브가 데이터를 캡슐화할 수 있도록 설계되어 있습니다.
한다면ng-transclude
이와 같은 범위를 유지하지 않았습니다.따라서 임의의 콘텐츠는 모두 지시문의 구현 세부사항을 알아야 합니다(즉, 작성한 격리된 범위에서 사용할 수 있는 것이 무엇인지 알아야 합니다).
버그가 아니라면 컨테이너 디렉티브가 데이터를 콘텐츠에 전달하려면 어떻게 해야 합니까?만약 내가 시도했던 것과 같은 속성을 설정하지 않았다면 말입니다.
컨테이너 지시문과 포함된 지시문이 결합되어 있는 경우(즉, 사용자가 두 지시문을 모두 작성하고 함께 작동해야 함), 공유 컨트롤러를 통해 통신해야 합니다.
컨테이너 디렉티브가 자녀의 범위에 콘텐츠를 삽입해야 하는 경우(예: ng-repeat)는 격리된 스코프를 사용하지 마십시오.
각도의 문서에는, 동작에 관한 내용이 명료하게 기재되어 있습니다.
"일반적인 설정에서 위젯은 격리 범위를 작성하지만 변환은 하위 항목이 아니라 격리 범위의 형제 항목입니다.이를 통해 위젯이 개인 상태가 되고 변환이 상위(사전 격리) 범위에 바인딩될 수 있습니다."
수동으로 하위 요소를 제외할 수 있습니다.
link: function(scope, element, attrs, ctrl, transclude) {
transclude(scope, function(clone, scope) {
element.find('.transclude-placeholder').append(clone);
});
}
상위 정답은 최대 v1.2까지의 Angular에 대해서만 정답은 다음과 같습니다.
Angular v1.3 이후 동작이 변경되어 질문의 "I expected" 부분에 설명된 대로 동작하므로 이 질문은 Angular v1.3+에서는 사용되지 않습니다.
출처 : https://github.com/angular/angular.js/commit/fb0c77f0b66ed757a56af13f81b943419fdcbd7f
언급URL : https://stackoverflow.com/questions/17788289/why-ng-transcludes-scope-is-not-a-child-of-its-directives-scope-if-the-direc
'source' 카테고리의 다른 글
이름/값 구조를 위한 JSON 스키마 작성 방법 (0) | 2023.02.13 |
---|---|
ngCordova를 사용한 애니메이션 방향 화살표 "주변" 스타일 (0) | 2023.02.13 |
Woocommerce에서 카트 항목 수 제한 (0) | 2023.02.13 |
ng-repeat 디렉티브의 "priority"는 무엇을 변경할 수 있습니까? (0) | 2023.02.13 |
테마를 사용하지 않고 WordPress에서 HTML 사이트를 호스팅하는 방법은 무엇입니까?그게 가능한가요? (0) | 2023.02.13 |