Question

我有多个div负责视图的不同部分，另一个是所有部分的覆盖（#loading-div）。我希望加载div等待所有视图加载然后消失，但它不能按预期工作。请参阅下面的代码。

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();
}

你可以帮我解决这个问题，让div在加载包装器中的其他所有内容后出现。

提前致谢。

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

您可以使用$includeContentLoaded，其中文档状态为......

每次重新加载ngInclude内容时都会发出。

然后，每次ngInclude更新时，您都可以收听此事件：

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

选中此fiddle进行演示。

在Angular JS中加载所有视图后的Fire函数

2 个答案: