각도 js에 ng-include 로드 완료
html 로딩의 끝을 검출하는 가장 좋은 방법은 무엇입니까?ng–include로드가 완료되면 실행되는 코드를 작성하고 싶습니다.
두 가지 방법으로 검출할 수 있습니다.ng-include필요에 따라 로드가 완료되었습니다.
1) 속성 경유 - 인라인 표현용.예:
<div ng-include="'template.html'" onload="loaded = true"></div>
2) 다음 이벤트를 통해ng-includeouts - 앱 전체 처리용입니다.예:
app.run(function($rootScope){
$rootScope.$on("$includeContentLoaded", function(event, templateName){
//...
});
});
콘텐츠 로드가 완료되면
사용할 수 있습니다.onload그것을 위해 다음과 같이
<div ng-include=".." onload="finishLoading()"></div>
컨트롤러,
$scope.finishLoading = function() {
}
로딩 후ng-include finishLoading스코프 함수가 호출합니다.
다음 코드를 사용할 수 있습니다.
$scope.$on('$includeContentLoaded', function () {
// it has loaded!
});
여기 모든 것을 파악할 수 있는 완전한 예가 있습니다.ng-include응용 프로그램에서 내보낸 이벤트를 로드합니다.
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
</head>
<body ng-controller="myController">
<div ng-include="'snippet.html'"></div>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller('myController', function($scope) {
$scope.$on('$includeContentLoaded', function(event, target){
console.log(event); //this $includeContentLoaded event object
console.log(target); //path to the included resource, 'snippet.html' in this case
});
});
</script>
</body>
</html>
제가 가지고 있던 문제, 그리고 제가 이 글을 올리는 데 시간을 할애하는 이유는 두 가지 모두를 포함시키지 못했기 때문입니다.ng-app그리고.ng-controller내 HTML 마크업에서.
요소가 존재할 때까지 기다려야 하는 경우$timeout와 함께$includeContentLoaded:
var selector = '#foo';
$rootScope.$on('$includeContentLoaded', function(event, templateName){
$timeout(() => {
const $el = angular.element(selector);
if ($el.length) {
// Do stuff with element.
}
});
});
타임아웃을 통해 적절한 시간 부하를 얻을 수 있습니다.특히 이 타임아웃이ng-include에는 렌더링에 몇 밀리초가 걸리는 디렉티브가 포함되어 있습니다.
대신 JS 콜스택 트릭을 사용하는 방법도 있습니다.놓다ng-init="eventName"필요한 요소 위에 있습니다.그런 다음 각도 컨트롤러에서 이벤트를 선언합니다.
$scope.eventName = () => {
setTimeout(() => { alert('loaded!'); }, 0);
}
따라서 각도에 관한 모든 것이 로드되어 있을 때만 경보가 팝업됩니다.JavaScript의 콜 스택이 일부 코드를 Microtask로 간주하고 다른 코드를 Macrotask로 간주하며 Microtask가 항상 먼저 실행되며 모든 Microtask가 실행된 직후에 Macrotask가 콜 스택으로 처리됩니다.
그리고.setTimeout()는 JavaScript용 Macrotask로 간주되므로 최신 태스크로만 실행됩니다.
언급URL : https://stackoverflow.com/questions/27576643/finished-loading-of-ng-include-in-angular-js
'codememo' 카테고리의 다른 글
| 스프링 부트에서 Postgre를 사용하여 Data Source를 로드할 수 없음SQL 드라이버 (0) | 2023.02.12 |
|---|---|
| outside/esc 클릭 시 Angularjs 부트스트랩모달 종료 콜 (0) | 2023.02.08 |
| Woocommerce 3에서 제품 속성 레이블 이름을 가져옵니다. (0) | 2023.02.08 |
| 이동 시 JSON Marshal이 포함된 소문자 JSON 키 이름 (0) | 2023.02.08 |
| PHP 루프:세 항목 구문 주위에 div를 추가합니다. (0) | 2023.02.08 |