답변:
$ viewContentLoaded의 문서에 따르면 작동해야합니다.
ngView 컨텐츠를 다시로드 할 때마다 발생합니다.
$viewContentLoaded 이 이벤트를 수신한다는 의미의 이벤트가 발생합니다.
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>에서 MainCtrl이 이벤트를들을 수 있습니다
$scope.$on('$viewContentLoaded', function(){
//Here your view content is fully loaded !!
});데모 확인
ng-repeat복잡한 루프 및 조건에 따라 HTML / 콘텐츠를 생성하는 여러 개의 중첩 된 지시문이 있는 경우에는 작동하지 않습니다 . $viewContentLoaded이벤트가 트리거 된 후에도 일정 시간 동안 렌더링이 계속됩니다 . 모든 요소가 완전히 렌더링되었는지 확인한 다음 특정 코드를 실행하는 방법은 무엇입니까? 아무 피드백?
각도 <1.6.X
angular.element(document).ready(function () {
console.log('page loading completed');
});각도> = 1.6.X
angular.element(function () {
console.log('page loading completed');
});지시문과 각도 요소 ready방법을 다음과 같이 사용하십시오 .
.directive( 'elemReady', function( $parse ) {
return {
restrict: 'A',
link: function( $scope, elem, attrs ) {
elem.ready(function(){
$scope.$apply(function(){
var func = $parse(attrs.elemReady);
func($scope);
})
})
}
}
})<div elem-ready="someMethod()"></div>또는 컨트롤러로 구문을 사용 하는 사람들을 위해 ...
<div elem-ready="vm.someMethod()"></div>이것의 장점은 원하는만큼 UI를 넓게 또는 세분화 할 수 있고 컨트롤러에서 DOM 로직을 제거한다는 것입니다. 이것이 권장되는 Angular 방식 이라고 주장합니다 .
동일한 노드에서 다른 지시문이 작동하는 경우이 지시문의 우선 순위를 지정해야 할 수도 있습니다.
elem.ready( $scope.$apply( readyFunc( $scope ))); 왜 그런지 아는 아이디어가 있습니까? 아마도 각도 업데이트가 일어 났습니까? 어쨌든-그것이 가능하다면 우아한 접근법입니다.
attrs.onReady현재 상태 여야합니다. 다른 문제는 내가 커피 스크립트를 메모리에서 JS로 변환 할 때 얻는 것을 펑키라고 부르는 것이었다.
$timeout. 명시 적으로 addt을 작성 중입니다. DOM 노드는 단순히 비 DOM 논리를 실행합니다. 해당 메소드가 $ scope 계층 구조에서 멀리 떨어져 하위 범위가 상속하는 경우에만 재사용 할 수 있습니다. NG 관점에서는 좋지 않다고 생각합니다.
$timeout(function() {})주위를 추가 한 후 나를 위해 일했습니다 elem.ready(). 그렇지 않으면 $digest already in progress오류가 발생했습니다. 어쨌든, 고마워! 나는 지난 한 시간 동안 이것으로 어려움을 겪고있다.
{{YourFunction()}}HTML 요소 다음 에 추가하여 직접 호출 할 수 있습니다 .
여기 Plunker Link있습니다.
Google 차트를 처리하는 동안이 논리를 구현해야했습니다. 내가 한 것은 컨트롤러 정의 내부의 HTML 끝에서 추가 한 것입니다.
<body>
-- some html here --
--and at the end or where ever you want --
<div ng-init="FunCall()"></div>
</body>그 기능에서 단순히 논리를 호출하십시오.
$scope.FunCall = function () {
alert("Called");
}var myM = angular.module('data-module');
myM.directive('myDirect',['$document', function( $document ){
function link( scope , element , attrs ){
element.ready( function(){
} );
scope.$on( '$viewContentLoaded' , function(){
console.log(" ===> Called on View Load ") ;
} );
}
return {
link: link
};
}] );위의 방법은 나를 위해 일했습니다.
각도 js에서 onload 이벤트의 자바 스크립트 버전을 호출 할 수 있습니다. 이 ng-load 이벤트는 div, span, body, iframe, img 등과 같은 dom 요소에 적용될 수 있습니다. 다음은 기존 프로젝트에 ng-load를 추가하는 링크입니다.
다음은 iframe에 대한 예제입니다. 일단로드 되면 testCallbackFunction 이 컨트롤러에서 호출됩니다.
예
JS
// include the `ngLoad` module
var app = angular.module('myApp', ['ngLoad']);
app.controller('myCtrl', function($scope) {
$scope.testCallbackFunction = function() {
//TODO : Things to do once Element is loaded
};
});
HTML
<div ng-app='myApp' ng-controller='myCtrl'>
<iframe src="test.html" ng-load callback="testCallbackFunction()">
</div>이미 $ digest 오류가 발생하면 다음과 같은 도움이 될 수 있습니다.
return {
restrict: 'A',
link: function( $scope, elem, attrs ) {
elem.ready(function(){
if(!$scope.$$phase) {
$scope.$apply(function(){
var func = $parse(attrs.elemReady);
func($scope);
})
}
else {
var func = $parse(attrs.elemReady);
func($scope);
}
})
}
}이벤트 리스너를 창로드 이벤트로 설정하여 페이지로드 후 실행이 부분적으로 만족되어야합니다.
window.addEventListener("load",function()...)module.run(function()...)각도 안에는 모듈 구조와 종속성에 대한 모든 액세스 권한이 있습니다.
당신은 할 수 broadcast및 emit이벤트 통신 교량.
예를 들면 다음과 같습니다.
나는 사용 된 {{myFunction()}}템플릿에하지만 다른 방법을 찾을 여기에 사용 $timeout컨트롤러 내부. 내가 그것을 공유하고, 나에게 잘 작동한다고 생각했습니다.
angular.module('myApp').controller('myCtrl', ['$timeout',
function($timeout) {
var self = this;
self.controllerFunction = function () { alert('controller function');}
$timeout(function () {
var vanillaFunction = function () { alert('vanilla function'); }();
self.controllerFunction();
});
}]);특정 요소를 완전히로드하려면 해당 요소에서 ng-init를 사용하십시오.
예 : <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>
initModalFacultyInfo () 함수는 컨트롤러에 존재해야합니다.
중첩 된 뷰가있는 경우 $ viewContentLoaded가 모든 중첩 된 뷰에 대해 트리거됩니다. 최종 $ viewContentLoaded를 찾기 위해이 해결 방법을 만들었습니다. Prerender에 필요한 $ window.prerenderReady를 설정하면 정상적으로 작동합니다 (메인 app.js의 .run ()으로 이동).
// Trigger $window.prerenderReady once page is stable
// Note that since we have nested views - $viewContentLoaded is fired multiple
// times and we need to go around this problem
var viewContentLoads = 0;
var checkReady = function(previousContentLoads) {
var currentContentLoads = Number(viewContentLoads) + 0; // Create a local copy of the number of loads
if (previousContentLoads === currentContentLoads) { // Check if we are in a steady state
$window.prerenderReady = true; // Raise the flag saying we are ready
} else {
if ($window.prerenderReady || currentContentLoads > 20) return; // Runaway check
$timeout(function() {checkReady(currentContentLoads);}, 100); // Wait 100ms and recheck
}
};
$rootScope.$on('$stateChangeSuccess', function() {
checkReady(-1); // Changed the state - ready to listen for end of render
});
$rootScope.$on('$viewContentLoaded', function() {
viewContentLoads ++;
});var myTestApp = angular.module("myTestApp", []);
myTestApp.controller("myTestController", function($scope, $window) {
$window.onload = function() {
alert("is called on page load.");
};
});나를 위해 일하는 해결책은 다음과 같습니다.
app.directive('onFinishRender', ['$timeout', '$parse', function ($timeout, $parse) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
if (!!attr.onFinishRender) {
$parse(attr.onFinishRender)(scope);
}
});
}
if (!!attr.onStartRender) {
if (scope.$first === true) {
$timeout(function () {
scope.$emit('ngRepeatStarted');
if (!!attr.onStartRender) {
$parse(attr.onStartRender)(scope);
}
});
}
}
}
}
}]);컨트롤러 코드는 다음과 같습니다
$scope.crearTooltip = function () {
$('[data-toggle="popover"]').popover();
}HTML 코드는 다음과 같습니다
<tr ng-repeat="item in $data" on-finish-render="crearTooltip()">setInterval내용이로드되기를 기다리는 데 사용 합니다. 이것이 당신이 그 문제를 해결하는 데 도움이되기를 바랍니다.
var $audio = $('#audio');
var src = $audio.attr('src');
var a;
a = window.setInterval(function(){
src = $audio.attr('src');
if(src != undefined){
window.clearInterval(a);
$('audio').mediaelementplayer({
audioWidth: '100%'
});
}
}, 0);setInterval 2016 년 솔루션으로 합니까?