모든 뷰 로드 완료 후 Javascript 실행

모든 뷰 로드 완료 후 Javascript 실행

저는 Angular를 사용하여 웹 애플리케이션을 만들고 있으며, 이 모든 것을 기다릴 방법을 찾고 있습니다.data-ng-include요소가 평가되어 로딩이 종료되었습니다.예를 들어 메뉴는 각 페이지의 주요 내용과 마찬가지로 로드되는 보기이므로 최소한 두 개 이상 있습니다.data-ng-include평가 및 로딩됩니다.또한 포함 메뉴는 중첩되어 있습니다.data-ng-repeat메뉴를 구축합니다.이 모든 것을 포함한 각 함수가 로드되고 DOM이 실제로 준비되면 스크립트를 시작할 수 있는 방법이 필요합니다.

Angular가 페이지 설정을 마쳤을 때 발생하는 이벤트가 있습니까?

앙구아르의 실시JS는 기본이며 기본적으로 data-ng-include를 사용하여 템플릿을 만드는 데 사용합니다.각 페이지는 data-ng-include를 통해 로드되는 뷰(각도가 아닌 html 파일)로, 그 위아래에 헤더와 바닥글이 있습니다.또한 헤더는 angular를 포함하는 글로벌뷰(각 뷰가 아님) html 파일을 동적으로 로드합니다.

지금까지 Angular를 사용한 것은 메뉴뿐입니다.JS는 템플리트 이외에는 사용할 수 없습니다.JSP에 의해 동적으로 생성되어 서버에서 반환되는 DOM에 삽입되는 JSON 개체를 사용하여 메뉴를 작성하기 위해 사용합니다.

프런트 엔드 유저의 생활을 용이하게 하기 위해서, 어떠한 종류의 반복적인 JavaScript 기능도 모듈로 코드화되어 페이지 로드시에 검출되어 JavaScript 기능이 부가되는 요소의 데이터 기능 속성을 사용해 동적으로 로드됩니다.

예를 들어 다음과 같은 경우가 있습니다.<div id="mySubMenu" data-features="subMenu"></div>페이지 로드 시 데이터 기능 요소를 가진 각 요소가 검출되고 관련 JS 모듈이 로드됩니다.이 경우 로드됩니다./scripts/modules/subMenu.js.

필요한 것은 include 함수 또는 기타 angular 함수에 기인하는 모든 요소가 페이지에 표시되어 조작할 준비가 될 때까지 이 기능 검출 및 첨부 파일의 실행을 지연시키는 방법입니다.특히 이러한 기능에는 데이터 기능 속성을 가진 요소가 포함되어 있을 수 있습니다.

다른 곳에서 콘트롤러를 몸에 장착하고 아무것도 장착하지 않았다고 언급한 사람은 다음과 같습니다.

$scope.$on('$viewContentLoaded', function() {
    // Init Features Here
});

효과가 없어서 다른 방법을 찾고 있어요.

저는 이 질문에서 Theo의 솔루션을 선택하게 되었습니다: angular.js 로드가 완료되면 이벤트를 보냅니다.

로드된 콘텐츠:

$rootScope.$on('$includeContentLoaded', function() {
    //do your will
});

요청하신 콘텐츠:

$rootScope.$on('$includeContentRequested', function() {
    //...
});

이것이 올바른 방법이 아닌 것은 확실합니다만…

뷰 컨트롤러에 아래 기능을 넣고 뷰가 앱에 로드된 후 실행하였습니다.뷰 로드에 이은 다음 다이제스트 사이클(잘못된 경우 여기에서 정정)에 실행되므로 페이지가 형성되면 실행됩니다.

setTimeout(function(){
  //do this after view has loaded :)
  console.log('success!');
}, 0);

각 뷰가 setTimeouts를 반환한 후 콜백을 통해 이들을 연결하거나 비동기 병렬 라이브러리를 사용하여 다른 기능을 실행할 수 있습니다.

나는 적절한 대답은 NO라고 생각한다.당신은 당신의 앱과 모델을 보는 방법을 바꾸고 그것을 "각선 방식"에 맞춰야 합니다.아마도 당신이 필요로 하는 것을 성취할 수 있는 더 건강한 방법이 있을 것이다.이벤트를 요소에 첨부할 필요가 있는 경우 지시를 사용할 수 있지만 물론 이 단계에서 무엇이 최선인지 판단할 수 있는 충분한 정보가 없습니다.

angular.direction과 함께 angular.directions를 참조하는 것이 좋습니다.

다음은 JQUERY 플러그에서 두 가지 모두를 사용하는 방법에 대한 플런커 데모입니다.

http://plnkr.co/edit/WGdNEM?p=preview

다음 예시는 별도의 파일에 디렉티브가 있는 예입니다.

http://plnkr.co/edit/YNBSWPLeWqsfGvOTwsMB?p=preview

JQuery Promise를 사용하여 각도 루트 컨트롤러 내에서 이 약속을 이행할 수 있습니다.각도 컨트롤러 또는 jquery 코드가 실행되기 전에 약속을 설정합니다.

var AppReadyDeferred = $.Deferred();
var AppReadyPromise = AppReadyDeferred.promise();

모든 것이 준비되면 각도 컨트롤러 안에서

AppReadyDeferred.resolve();

jQuery 코드에서 해결되기를 기다립니다.

window.AppReadyPromise.done(() => {
  // Angular is ready to go!;
});

컴파일 전에 템플릿 표시를 지연시키려면 ng-cloak을 사용합니다.또한 숨겨진 필드를 ng-cloak이 있는 html 요소에 마지막 자식으로 추가할 수 있습니다(본문 태그 또는 ng-app이 시작되는 곳에서 사용하는 것이 좋습니다). 그런 다음 인터벌 루프에서 이 숨겨진 요소의 존재를 확인할 수 있습니다.

히든필드 파트는 이런 느낌이에요.

<div ng-include="'ngtplhidden'"></hidden>
<script type="text/ng-template" id="ngtplhidden">
<span id="elemidToCheckInAnIntervalFunc"></span>
</script>

도 한번 .document.onreadystatechange

document.onreadystatechange = x => {
    console.log('ready!');
}

언급URL : https://stackoverflow.com/questions/21686986/run-javascript-after-angular-has-finished-loading-all-views