Feuer-Funktion, nachdem alle Ansichten in Angular JS geladen wurden

Question

Ich habe mehrere divs verantwortlich für verschiedene Teile der Ansicht und eine, die eine Überlagerung für alle von ihnen ist (# loading-div). Ich möchte das Laden div warten, bis alle Ansichten geladen sind und dann verschwinden, aber es funktioniert nicht wie erwartet. Bitte beachten Sie den folgenden Code.

HTML

<div id="content-wrapper" ng-controller="UAMController as uamCtrl"> 
    <div id="left-column" ng-include="uamCtrl.leftColumnTemplate"></div> 
    <div id="middle-column" ng-include="uamCtrl.middleColumnTemplate"></div> 
    <div id="right-column" ng-class="{'active': uamCtrl.middleColumnTemplate}" ng-include="uamCtrl.rightColumnTemplate"></div> 
    <div id="loading-div" ng-init="coreCtrl.loadingBlock()"></div> 
</div> 

CONTROLLER

self.loadingBlock = function() { 
    $('#loading-div').fadeOut(); 
} 

Könnten Sie mir bitte auf die Frage helfen, das div zu erscheinen direkt nach dem alles andere in der Hülle geladen wird.

Vielen Dank im Voraus.

Answer 1

try below code in your controller.. $viewContentLoaded event will be fire after all DOM is loaded to the browser. 

$scope.$on('$viewContentLoaded', function(){ 
    $('#loading-div').fadeOut(); 
}); 

Answer 2

Sie $includeContentLoaded verwenden können, die als die Dokumentation Zustand ist ...

jedes Mal, das ausgestrahlte ngInclude Inhalt neu geladen wird.

Dann können Sie diese auch jedes Mal hören die ngInclude aktualisiert:

$rootScope.$on('$includeContentLoaded', function(event) { 
    $('#output').append('<p>' + event.targetScope.name + ' include\'s content was loaded.</p>'); 
}); 

prüfen diese fiddle für die Demonstration.