각도 지시 - 컴파일, 컨트롤러, 프리링크 및 포스트링크를 사용하는 시기와 방법
Angular 지시문을 작성할 때 다음 함수 중 하나를 사용하여 지시문이 선언된 요소의 DOM 동작, 내용 및 모양을 조작할 수 있습니다.
- 컴파일하다
- 컨트롤러
- 링크 전
- 포스트 링크
어떤 기능을 사용해야 하는지 혼란이 있는 것 같습니다.이 질문에는 다음이 포함됩니다.
지시적 기본
기능성, 실행 및 실행 안 함
관련 질문:
- 지시: 링크 vs 컴파일 vs 컨트롤러.
- angular.js 지시어를 정의할 때 'controller', 'link' 및 'compile' 함수의 차이입니다.
- angularjs에서의 컴파일 함수와 링크 함수의 차이점은 무엇입니까?
- Angular의 사전 컴파일 요소와 사후 컴파일 요소의 차이JS 디렉티브?
- Angular JS Directive - 템플릿, 컴파일 또는 링크?
- post link vs pre link in Angular js directives.
지시 기능은 어떤 순서로 실행됩니까?
단일 디렉티브의 경우
다음의 플랭크에 근거해, 다음의 HTML 마크업에 대해 검토해 주세요.
<body>
<div log='some-div'></div>
</body>
다음 지시 선언을 사용합니다.
myApp.directive('log', function() {
return {
controller: function( $scope, $element, $attrs, $transclude ) {
console.log( $attrs.log + ' (controller)' );
},
compile: function compile( tElement, tAttributes ) {
console.log( tAttributes.log + ' (compile)' );
return {
pre: function preLink( scope, element, attributes ) {
console.log( attributes.log + ' (pre-link)' );
},
post: function postLink( scope, element, attributes ) {
console.log( attributes.log + ' (post-link)' );
}
};
}
};
});
콘솔 출력은 다음과 같습니다.
some-div (compile)
some-div (controller)
some-div (pre-link)
some-div (post-link)
라는 것을 알 수 .compile되며, 그 후 ""가 실행됩니다.controller , , , 「 」pre-link 마지막은 '마지막'입니다.post-link.
내포된 지시어의 경우
주의: 다음은 자녀의 링크 기능을 렌더링하는 지침에는 적용되지 않습니다.꽤 많은 Angular 디렉티브(ngIf, ngRepeat, 또는 ngRepeat와 같은)가 그렇게 합니다.
transclude에는, 의 「」가 .link자녀의 지시 전에 호출된 함수compile출됩니니다다
원래 HTML 마크업은 종종 각각 고유한 지시문이 있는 중첩된 요소로 만들어집니다.다음 마크업과 같이 (플랭크 참조)
<body>
<div log='parent'>
<div log='..first-child'></div>
<div log='..second-child'></div>
</div>
</body>
콘솔 출력은 다음과 같습니다.
// The compile phase
parent (compile)
..first-child (compile)
..second-child (compile)
// The link phase
parent (controller)
parent (pre-link)
..first-child (controller)
..first-child (pre-link)
..first-child (post-link)
..second-child (controller)
..second-child (pre-link)
..second-child (post-link)
parent (post-link)
여기서는 컴파일 단계와 링크 단계의 두 단계를 구분할 수 있습니다.
컴파일 단계
단계를 하고 DOM을 호출합니다.compile하면 다음과 같습니다그래픽으로 표현하면 다음과 같습니다.
이 단계에서 컴파일 함수가 취득하는 템플릿은 (인스턴스 템플릿이 아닌) 소스 템플릿임을 언급하는 것이 중요합니다.
링크 단계
DOM에 이지만 DOM에 의해 될 수 .ng-repeat또는 즉석에서 도입됩니다.
지시문이 있는 요소의 새 인스턴스가 DOM에 렌더링될 때마다 링크 단계가 시작됩니다.
가 "Angular calls"를 호출합니다.controller,pre-link , 하고 , , 전화합니다.post-link
이들 함수 호출 사이에 또 어떤 일이 발생합니까?
는 ᄃ다 양다 양다 라고 불리는 두 안에서 됩니다.$compile서 compile 및 """"""""""""""""""""" 가 실행됩니다.nodeLinkFn서 controller,preLink ★★★★★★★★★★★★★★★★★」postLink부르기 가지 일이 .지시함수가 호출되기 전과 호출된 후에 각도함수 내에서 여러 가지 일이 발생합니다.아마도 가장 주목할 만한 것은 아동 재귀일 것이다.다음 간단한 그림은 컴파일 단계 및 링크 단계의 주요 단계를 보여 줍니다.
이러한 순서를 설명하기 위해서, 다음의 HTML 마크 업을 사용합니다.
<div ng-repeat="i in [0,1,2]">
<my-element>
<div>Inner content</div>
</my-element>
</div>
다음과 같은 지시사항을 사용합니다.
myApp.directive( 'myElement', function() {
return {
restrict: 'EA',
transclude: true,
template: '<div>{{label}}<div ng-transclude></div></div>'
}
});
컴파일
compileAPI를 사용합니다.
compile: function compile( tElement, tAttributes ) { ... }
에는 「」가 붙는 .t제공된 요소 및 Atribute를 나타내는 것은 인스턴스가 아닌 소스 템플릿의 요소 및 Atribute입니다.
의 compile트랜스코프된 콘텐츠(있는 경우)가 삭제되고 템플릿이 마크업에 적용됩니다. 때문에, 「」에 는, 「」입니다.compile을 사용하다
<my-element>
<div>
"{{label}}"
<div ng-transclude></div>
</div>
</my-element>
이 시점에서 변환된 내용은 다시 삽입되지 않습니다.
의 「」에의 .compileAngular는 지시문에 의해 방금 도입된 요소(템플릿 요소 등)를 포함하여 모든 하위 요소를 통과합니다.
인스턴스 생성
이 경우 3개 작성ng-repeat따라서 다음 시퀀스는 인스턴스당1회씩 3회 실행됩니다.
컨트롤러
controllerAPI를 사용합니다.
controller: function( $scope, $element, $attrs, $transclude ) { ... }
국면에 함수가 되었습니다.$compile이제 스코프가 제공됩니다.
자스코프(자스코프 자스코프)가 됩니다.scope: true 스코프 「」)를 참조해 주세요」)scope: {...}된 경우을 클릭합니다.
다음으로 instance 요소의 범위를 지정하여 컨트롤러가 실행됩니다.
링크 전
pre-linkAPI를 사용합니다.
function preLink( scope, element, attributes, controller ) { ... }
「」에의 콜 사이에는, ..controller 및.preLink angular. 각각의합니다.각도는 여전히 각각의 사용 방법에 대한 권장 사항을 제공합니다.
「 」를 ..preLink호출, 링크 함수는 각 하위 요소를 통과합니다. 올바른 링크 함수를 호출하고 현재 범위(자녀 요소의 상위 범위 역할을 함)를 연결합니다.
링크 후
post-link합니다.pre-link★★★★
function postLink( scope, element, attributes, controller ) { ... }
지시가 가 있을 것이다..postLink되며 모든의 링크 프로세스가 됩니다..postLink★★★★★★★★★★★★★★★★★★.
, 가 되면.postLink'먹다'는 '먹다'는 '먹다'입니다.츠키다
- data 바인딩
- 트랜스클루전 적용
- 스코프 첨부
이 단계의 템플릿은 다음과 같습니다.
<my-element>
<div class="ng-binding">
"{{label}}"
<div ng-transclude>
<div class="ng-scope">Inner content</div>
</div>
</div>
</my-element>
여러 기능을 어떻게 선언합니까?
컴파일, 컨트롤러, 링크 전 및 링크 후
4가지 기능을 모두 사용하는 경우 지시문은 다음 형식을 따릅니다.
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
controller: function( $scope, $element, $attrs, $transclude ) {
// Controller code goes here.
},
compile: function compile( tElement, tAttributes, transcludeFn ) {
// Compile code goes here.
return {
pre: function preLink( scope, element, attributes, controller, transcludeFn ) {
// Pre-link code goes here
},
post: function postLink( scope, element, attributes, controller, transcludeFn ) {
// Post-link code goes here
}
};
}
};
});
컴파일은 링크 전 함수와 링크 후 함수를 모두 포함하는 개체를 반환합니다.Angular language에서는 컴파일 함수가 템플릿 함수를 반환합니다.
컴파일, 컨트롤러 및 포스트 링크
ifpre-link컴파일 함수는 다음과 같이 정의 객체 대신 링크 후 함수를 반환할 수 있습니다.
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
controller: function( $scope, $element, $attrs, $transclude ) {
// Controller code goes here.
},
compile: function compile( tElement, tAttributes, transcludeFn ) {
// Compile code goes here.
return function postLink( scope, element, attributes, controller, transcludeFn ) {
// Post-link code goes here
};
}
};
});
'아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아,compile (post)에 ('post' 뒤에link이치노이를 위해 다음을 사용할 수 있습니다.
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
controller: function( $scope, $element, $attrs, $transclude ) {
// Controller code goes here.
},
compile: function compile( tElement, tAttributes, transcludeFn ) {
// Compile code goes here.
return this.link;
},
link: function( scope, element, attributes, controller, transcludeFn ) {
// Post-link code goes here
}
};
});
컨트롤러 및 포스트 링크
않은 하고 "" 를 "포스트 링크" 함수로 할 수 .link"CHANGE: "CHANGE:
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
controller: function( $scope, $element, $attrs, $transclude ) {
// Controller code goes here.
},
link: function postLink( scope, element, attributes, controller, transcludeFn ) {
// Post-link code goes here
},
};
});
컨트롤러 없음
중에서 간단히 할 수 .controller기능을 합니다.'만'일 post-link필요한 기능은 다음과 같습니다.
myApp.directive( 'myDirective', function () {
return {
restrict: 'EA',
link: function postLink( scope, element, attributes, controller, transcludeFn ) {
// Post-link code goes here
},
};
});
소스 템플릿과 인스턴스 템플릿의 차이점은 무엇입니까?
Angular가 DOM 조작을 허용한다는 것은 컴파일 프로세스에 대한 입력 마크업이 출력과 다를 수 있음을 의미합니다.일부 은 여러 수 예: " " "와 같이).ng-repeatDOM(DOM)
각도 용어는 다소 일관성이 없지만 다음 두 가지 유형의 마크업을 구분합니다.
- 소스 템플릿 - 필요에 따라 복제할 마크업.클로닝된 경우 이 마크업은 DOM에 렌더링되지 않습니다.
- 인스턴스 템플릿 - DOM에 렌더링되는 실제 마크업.클로닝이 관련된 경우 각 인스턴스는 클론이 됩니다.
다음 마크업이 이를 나타내고 있습니다.
<div ng-repeat="i in [0,1,2]">
<my-directive>{{i}}</my-directive>
</div>
source html은 다음을 정의합니다.
<my-directive>{{i}}</my-directive>
소스 템플릿으로 사용됩니다.
but지만 an an an an an an an an 로 포장되어 있기 ng-repeat지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어, 지시어.이러한 클론은 인스턴스 템플릿이며 각각 DOM에 표시되며 관련 범위에 바인딩됩니다.
컴파일 함수
디렉티브는 「」입니다.compile이 함수는 Angular 부트스트랩이 발생했을 때 한 번만 호출됩니다.
공식적으로는 범위나 데이터 바인딩이 없는 (소스) 템플릿 조작을 수행할 수 있습니다.
이는 주로 최적화를 목적으로 하기 때문에 다음 마크업을 고려해 주십시오.
<tr ng-repeat="raw in raws">
<my-raw></my-raw>
</tr>
<my-raw>디렉티브는 특정 세트의 DOM 마크업을 렌더링합니다.하다
ng-repeat템플릿을<my-raw>각 인스턴스compile★★★★★★★★★★★★★★★★★★」- 마크업을합니다(「」의 「」의 「」
compile기능)를 다음에 허가합니다.ng-repeat복제할 수 있습니다.
의 raws후자의 옵션이 전자의 옵션보다 빠를 수 있습니다.
작업:
- 인스턴스(클론)의 템플릿으로 기능하도록 마크업을 조작합니다.
하지마
- 이벤트 핸들러를 접속합니다.
- 하위 요소를 검사합니다.
- 속성에 대한 관찰을 설정합니다.
- 스코프에 시계를 설정합니다.
컨트롤러 기능
디렉티브는 「」입니다.controller함수는 새로운 관련 요소가 인스턴스화될 때마다 호출됩니다.
공식적으로는controller을 사용하다
- 컨트롤러 간에 공유할 수 있는 컨트롤러 로직(방식)을 정의합니다.
- 스코프 변수를 시작합니다.
디렉티브에 격리된 범위가 포함되어 있는 경우 디렉티브 내에서 상위 범위에서 상속되는 속성은 아직 사용할 수 없다는 점에 유의해야 합니다.
작업:
- 컨트롤러 로직 정의
- 범위 변수 시작
하지 않음:
- 하위 요소를 검사합니다(아직 렌더링되지 않았거나 범위에 바인딩될 수 있음).
링크 후 기능
?post-link함수가 호출되고 이전의 모든 단계(바인딩, 트랜스클루전 등)가 수행되었습니다.
일반적으로 이 장소는 렌더링된 DOM을 더 조작하는 장소입니다.
작업:
- DOM(렌더화되어 인스턴스화된) 요소를 조작합니다.
- 이벤트 핸들러를 접속합니다.
- 하위 요소를 검사합니다.
- 속성에 대한 관찰을 설정합니다.
- 스코프에 시계를 설정합니다.
링크 전 기능
디렉티브는 「」입니다.pre-link함수는 새로운 관련 요소가 인스턴스화될 때마다 호출됩니다.
한 바와 같이 '컴파일 오더' 섹션은 과 같습니다.pre-link parent-then-child는 parent-then-child라고 불립니다.post-link 기능을 '함수'라고 .child-then-parent.
pre-link은 거의 를 들어 자녀 컨트롤러에 등 특별한이 될 수단, 등록은 '부모 컨트롤러'에예를 들어 자녀 컨트롤러가 부모 컨트롤러에 자신을 등록하지만 등록은 부모 컨트롤러에 있어야 합니다.parent-then-childfashion)ngModelController을 참조해 주십시오.)
하지 않음:
- 하위 요소를 검사합니다(아직 렌더링되지 않았거나 범위에 바인딩될 수 있음).
언급URL : https://stackoverflow.com/questions/24615103/angular-directives-when-and-how-to-use-compile-controller-pre-link-and-post
'programing' 카테고리의 다른 글
| 메서드 매개 변수를 변경할 수 있도록 신속하게 설정하시겠습니까? (0) | 2023.04.24 |
|---|---|
| Log4Net(애플리케이션 통찰력 포함) (0) | 2023.04.24 |
| 일반 목록 내의 모든 Null 요소를 한 번에 제거하려면 어떻게 해야 합니까? (0) | 2023.04.24 |
| 디스크에서 이미 삭제된 여러 파일을 Git repo에서 제거 (0) | 2023.04.24 |
| IF 함수 - 공식을 반복하지 않는 방법이 있습니까? (0) | 2023.04.24 |