Angular.js 의 transclusion 을 철저히 배 웁 니 다.

머리말
AngularJS 에서 명령 의 중요성 은 두말 할 필요 도 없다.명령 은 우리 로 하여 금 자신의 HTML 표 시 를 만 들 수 있 게 한다.이 는 사용자 정의 요 소 를 하나의 모듈 로 바 꾸 고 전단 개발 중의 모듈 화 모델 을 크게 나타 내 며 코드 의 가 독성 과 실용성 을 향상 시 켰 다.AngularJS 의 지령 도 AngularJS 를 배 우 는 데 있어 어 려 운 점 중 하나 이다.그 중의 많은 속성 은 반복 적 으로 공부 하고 진지 하 게 체득 해 야 그 중의 정교 한 점 을 깨 달 을 수 있다.
오늘 우리 가 말 하고 자 하 는 것 은 그 중의 중점 과 난점 이다.C transclusion.이 화제 에 대하 여 나 는 이전에 도 많은 글 을 써 서 이야기 한 적 이 있 지만,당시 에는 모두 박문 중의 예 를 그대로 따 랐 고,자신 도 비교적 깊 은 체득 을 하지 못 했 기 때문에 줄곧 요령 을 터득 하지 못 했다.오늘 우리 의 목 표 는 바로'transclusion 을 철저히 이해 하 는 것'이다.
1.transclusion 이 무엇 입 니까?
좋아,나 는 네가 반드시 사전 을 찾 으 러 갈 것 이라는 것 을 알 고 있 지만,너 는 사전에 transclusion 이라는 단어의 정확 한 해석 이 없다 는 것 을 알 게 될 것 이다!!나 니!!!이것 은 아버 지 를 속 이지 않 느 냐!!!
다행히 위 키 백과 에 주석 이 있 습 니 다.
transclusion 은 컴퓨터 과학 에서 하나의 문서 나 하나의 문서 의 일부분 을 다른 문서 에서 참조 하 는 것 을 말한다.
내 가 갈 게,이 건 아버 지 를 속 이지 않 아!!!무슨 소리 야!!!!
확실히,네가 알 아 맞 혔 어.이 해석 은 우리 에 게 아무런 도움 이 안 돼!!!!!!
다행히 우 리 는 마침내 어떤 사전 에서'끼 워 넣 기'라 는 설명 을 찾 았 다.여기 서 말 하 는 것 은 transclusion 이라는 단 어 를 말 하 는데 뒤에서 우리 가 곧 볼 transclude 라 는 단 어 는 사전에 서 전혀 찾 을 수 없다.됐어,진정 하고 계속 내 려 다 봐.사실 여기 서'끼 워 넣 기'로 번역 되 었 는데 실제 운용 에서 보면 비교적 적절 하 다.만약 당신 이 transclusion 이 무엇 인지 잘 이해 하지 못 한다 면,우 리 는 다음 에 하나의 예 로 설명 하 겠 습 니 다.
ok,이제 우 리 는 명령 을 만들어 야 합 니 다.우 리 는 이 명령 을<handsome-me>라 고 부 릅 니 다.이 명령 의 생 성 과정 을 먼저 생략 합 니 다.명령 을 어떻게 만 드 는 지 모 르 면 앞의 몇 편의 글 을 참조 하 십시오.
자,어쨌든 이 명령 은 이미 만 들 어 졌 기 때문에 우 리 는 다음 과 같은 몇 가지 용법 을 사용 할 수 있다.
첫 번 째 종류:

<handsome-me/> 

마치 input 처럼 그 렇 죠?아주 간단 합 니 다.우 리 는 그것 을'자 폐'라 고 부 릅 니 다.
두 번 째:

<handsome-me></handsome-me> 

마치 div 처럼 그 렇 죠?더 쉬 워 요.우 리 는 그것 을'다른 사람 이 닫 는 것'(위 와 같은)라벨 이 라 고 부 릅 니 다.
세 번 째:

<handsome-me>
  //       
</handsome-me> 

이것 은 두 번 째 것 과 비슷 하지만 약간 차이 가 있 습 니 다.우 리 는 그것 을'다른 사람 이 닫 고 중간 에 덩어리 를 넣 어 라'라 고 부 릅 니 다.never mind。。。）꼬리표.
우 리 는 다음 세 가지 라벨 을 비교 해 보 자.그것들 은 어떤 차이 가 있 습 니까?물론 많이 다 르 죠.그러나 구체 적 으로 오늘 우리 의 화 제 는 이와 관련 된 가장 큰 차이 점 은 앞의 두 가지 중간 에 한 덩어리 를 넣 지 않 았 고 세 번 째 중간 에 한 덩어리 를 넣 었 다 는 것 이다.OK,그래서 우 리 는 지금 transclusion 이 무엇 인지 정리 합 니 다.
명령 을 정의 할 때 구체 적 으로 사용 할 때 중간 에 덩어리 를 넣 으 려 면 transclusion 을 사용 해 야 합 니 다.
이 정 의 는 정말 너무 전형 적 입 니 다.어떤 공식 문서 보다 유 무 를 잘 알 고 있 습 니 다.여러 외국인 들 이 한참 동안 투 덜 거 렸 지만 유 무 를 모 르 고 중국 실정 에 완전히 부합 되 는 지 모 르 겠 습 니 다!!
자,정 의 를 알 게 된 후에 우 리 는 transclusion 을 어떻게 사용 하 는 지 구체 적 으로 살 펴 봐 야 한다.AngularJS 명령 의 작성 을 알 고 있다 면 return 대상 의 tranclude 명령 은 기본적으로 false 라 는 것 을 알 고 있 을 것 입 니 다.따라서 transclusion 을 사용 하려 면 이 transclude 속성 을 다른 값 으로 부여 해 야 합 니 다.물론 이 값 은 함부로 부여 할 수 없습니다.두 가지 선택 만 있 습 니 다.
첫 번 째 선택:

transclude: true 

두 번 째 선택:

transclude: 'element' 

내 가 갈 게,이 건 또 털실 이 야!둘 사이 에 털 차이 가 있 잖 아!!문서 가 전혀 모 르 잖 아!!!
진정 하 세 요.지금 우 리 는 차이 점 을 말 합 니 다.가장 많이 사용 되 는 것 은 첫 번 째 입 니 다.즉,할당 값 이 true 입 니 다.transclusion 의 중국어 뜻 을 기억 하 십 니까?"끼 워 넣 기"맞 죠?그래서 우 리 는 지금'덩어리'라 고 말 하지 않 고 중간 에 있 는 이 덩어리 를'끼 워 넣 는 부분'이 라 고 부른다.ok,본론 으로 돌아 가 transclude 가 true 일 때 삽입 부분 은 삽입 부분 입 니 다.예 를 들 어:

<handsome-me>
 {{name}}
<handsome-me> 

transclude:true에 끼 워 넣 은 부분 은 무엇 입 니까?참,바로{{name}}입 니 다.한 발 더:

<handsome-me>
 <div>
 <span>{{name}}</span>
 </div>
<handsome-me>

transclude:true에 끼 워 넣 은 부분 은 무엇 입 니까?맞다

<div>
 <span>{{name}}</span>
</div> 

너무 쉬 워 요.그 렇 죠?so easy！엄마 다 시 는 내 공부 걱정 안 해도 돼!!
이제 두 번 째 상황 을 말하자면 transclude 의 값 이 element 일 때 어떤 상황 입 니까?이 때 끼 워 넣 은 부분 은 원래 끼 워 넣 은 부분 에 외부 사용자 정의 태그,즉 전체 요소 가 됩 니 다.또 못 알 아 듣 겠 어!!!fork fork fork!!!!!!침착 해라,우리 다시 예 를 들 자.

<handsome-me>
 {{name}}
<handsome-me> 

transclude:'element'에 끼 워 넣 은 부분 이 뭐 예요?맞다

<handsome-me>
 {{name}}
<handsome-me> 

한 발 더:

<handsome-me>
 <div>
 <span>{{name}}</span>
 </div>
<handsome-me>

transclude:'element'에 끼 워 넣 은 부분 이 뭐 예요?맞다

<handsome-me>
 <div>
 <span>{{name}}</span>
 </div>
<handsome-me>

이렇게 상세 하 게 얘 기 했 는데 못 한다 고 하지 마!!
2.ng-transclude 의 역할 은 무엇 입 니까?
명령 을 작성 할 때,우 리 는 모두 template 나 template Url 같은 속성 을 가지 고 있 습 니 다.그 렇 죠?transclusion 을 사용 할 때,우 리 는 끼 워 넣 은 부분 을 템 플 릿 에 넣 어야 하기 때문에,우 리 는 두 가지 선택 이 있 는데,그 중 하 나 는 ng-transclude 를 사용 하 는 것 이다.
ng-transclude 가 무엇 에 쓰 이 는 지 정 의 를 먼저 보고 예 를 들 어 보 겠 습 니 다.
ng-transclude 는 삽입 부분 을 어디 에 배치 할 지 결정 합 니 다.
너무 이해 해!그래서 우 리 는 예 를 보 았 다.
가령 지령 이 이렇다 고 가정 하면:

<handsome-me>
 {{name}}
</handsome-me>

템 플 릿 은 다음 과 같 습 니 다.

<div>
 <p>MaMa does not need to worry about my study anymore! </p>
 <div ng-transclude></div>
</div> 

그래서transclude:true의 상황 에서 최종 적 으로 페이지 에 나타 난 HTML 은 어떤 모습 일 까?참,그 렇 군요.

<div>
 <p>MaMa does not need to worry about my study anymore! </p>
 {{name}} 
</div> 

다른 경우transclude:'element'의 경우 최종 적 으로 페이지 에 나타 난 HTML 은 어떤 모습 일 까?참,그 렇 군요.

<div>
 <p>MaMa does not need to worry about my study anymore! </p>
 <handsome-me>
  {{name}}
 </handsome-me>
</div> 

예 가 이렇게 분명 하 니,어쨌든 알 겠 지!!
3.ng-transclude 를 사용 하지 않 는 경우
OK,이제 문 제 를 생각해 보 겠 습 니 다.제 가 끼 워 넣 은 부분 을 제 템 플 릿 에 여러 번 넣 으 려 면 어떻게 해 야 합 니까?네가 말 할 수 있 겠 지만,그럼 ng-transclude 를 몇 개 더 넣 어 라!이것 은 당연히 안 됩 니 다.AngularJS 에서 명령 의 템 플 릿 에 ng-transclude 만 설명 할 수 있 습 니 다.그래서 이런 상황 에서 우 리 는 템 플 릿 을 사용 할 수 있 습 니 다.그래서 우 리 는tranclude()라 는 함 수 를 사용 해 야 합 니 다!!
나 니!이 건 또 뭐야!!!AngularJS 문 서 를 자세히 연구 해 보면$tranclude 라 는 서 비 스 를 발견 할 수 있 을 것 입 니 다.그것 이 바로 우리 가 지금 말 하고 자 하 는 것 입 니 다.그럼 이 함 수 는 어떻게 사용 합 니까?ng-repeat,ng-swift 소스 코드 에 대한 분석 을 보 았 다 면 링크 라 는 것 을 기억 할 것 입 니 다.이 물건 에 무엇이 있 는 지 나 를 오랫동안 괴 롭 혔 지만 나중에 나 는 이것linker()이 사실은transclude()이라는 것 을 알 게 되 었 다.
우 리 는 링크,copile,controller 에서 이 transclude 함수 의 그림 자 를 찾 을 수 있 습 니 다.링크 함수 에서 transclude 는 링크 함수 의 다섯 번 째 매개 변수 입 니 다.copile 함수 에서 transclude 는 copile 함수 의 세 번 째 매개 변수 입 니 다.이 두 함수 에서 우 리 는 의존 주입 을 사용 하지 않 았 기 때문에 순서 가 맞 으 면 맞 고 이름 을 마음대로 지 을 수 있 습 니 다.controller 함수 에 서 는 주입 에 의존 하기 때문에 transclude 는$transclude 입 니 다.이름 만 맞 으 면 됩 니 다.링크,copile,contrller 함수 에서 transclude 의 용법 이 똑 같 기 때문에 링크 함수 의 예 만 들 겠 습 니 다.
1.가장 간단 한 용법:

link(scope,elem,attrs,ctrl,transclude){
 var content = transclude();
 elem.append(content);
}

여기 서 우 리 는transclude()을 통 해 포 함 된 부분의 구체 적 인 내용 을 되 돌려 주 었 고 append 는 요소 의 elem 의 꼬리 에 있 습 니 다.물론 append 를 여러 번 원 하 셔 도 됩 니 다.
2.복잡 한 용법:

link(scope,elem,attrs,ctrl,transclude){
 tranclude(scope,function(clone){
  elem.append(clone);
 })
}

여기 서 tranclude 는 두 개의 인 자 를 받 아 들 였 습 니 다.첫 번 째 는 scope 이 고 역할 영역 을 대표 합 니 다.두 번 째 리 턴 함수 에는 하나의 매개 변수 클 라 이언 이 있 는데 사실은 포 함 된 내용 으로transclude()의 반환 값 과 똑 같 습 니 다.그럼 앞의 첫 번 째 매개 변수의 scope 는 무슨 소 용이 있 습 니까?이제 transclude 와 역할 영역 까지!
4.transclude 와 scope
우 리 는 명령 을 정의 할 때 scope 를 명시 하지 않 으 면 명령 의 역할 영역 이 부모 역할 영역 이라는 것 을 알 고 있다.성명scope:true이나scope:{} 이 있 으 면 명령 은 자신의 역할 도 메 인 을 만 들 고 하나의 원형 계승,하나의 독립 에 불과 하 다.만약 에 transclusion 을 사용한다 면 어떤 정서 든 새로운 역할 영역 을 생 성 할 것 이다.이 역할 영역 은 부모 역할 영역 에 직접 원형 을 계승 하고 그의 위치 와 명령 이 생 성 하 는 역할 영역 은 똑 같 으 며 이들 은 병렬 적 인 관계 에 속한다.
그래서 우 리 는 이제tranclude(scope,function(clone){})중의 scope 가 무슨 뜻 인지 알 수 있 습 니 다.기본 적 인 상황 에서 우리 가 간단하게translude() 를 사용한다 면 역할 도 메 인 은 기본적으로 transclude 가 생 성 한 자체 작용 도 메 인 입 니 다.그러나 우리 가tranclude(scope,function(clone){}) 를 사용한다 면 역할 영역 은 분명히 directive 의 역할 영역 이다.만약 우리 가 아버지의 역할 영역 을 사용 하고 싶다 면 어떻게 합 니까?아주 간단 합 니 다.

tranclude(scope.$parent,function(clone){})

새로운 역할 영역 을 원한 다 면 어떻게 하 죠?간단 합 니 다.

tranclude(scope.$parent.$new(),function(clone){}) 

네가 만약 문 작용 역 이 무엇 인지,작용 역 이 어떻게 계승 되 었 는 지,그것 은 오늘 우리 가 이야기 할 화제 가 아니다.
이렇게 많은 말 을 했 는데,이렇게 직 설 적 으로 말 하면,너 는 이미 AngularJS 의 transclusion 에 대해 철저하게 알 고 있 을 것 이다.알 겠 지?모 르 면 몇 번 더 보면 알 게 될 거 야!!!
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 안 드 로 이 드 개발 자 들 에 게 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.