如何在AngularJS所有组件及元素加载完成后隐藏加载动画？

这个问题我之前做AngularJS项目时也碰到过！原生DOM事件确实跟不上AngularJS的渲染节奏，毕竟AngularJS有自己的消化周期（digest cycle），那些原生事件触发的时候，Angular的组件还在编译渲染呢。给你几个靠谱的解决方案，根据你的场景选就行：

1. 用$viewContentLoaded监听视图加载完成 #

如果你的iframe是在AngularJS的路由视图（比如ngView或者ui-router的视图）里加载的，这个事件最适合。它会在视图对应的模板、指令完全编译渲染完成后触发，直接在控制器里监听就行：

// 在你的控制器中注入$scope
app.controller('YourController', function($scope) {
    $scope.$on('$viewContentLoaded', function() {
        HideLoading(); // 这里调用隐藏动画的函数
    });
});

2. 用$timeout延迟执行（通用方案） #

$timeout不带延迟时间（或者设为0）的时候，会把任务放到AngularJS消化周期的最后执行，这时候所有绑定的DOM元素和组件都已经渲染完成了。记得要在控制器里注入$timeout服务：

app.controller('YourController', function($timeout) {
    // 假设这是按钮点击触发的加载逻辑
    $scope.openIframe = function() {
        // 显示加载动画的逻辑
        ShowLoading();
        
        // 加载iframe的逻辑...
        
        // 用$timeout确保所有组件渲染完成后隐藏动画
        $timeout(function() {
            HideLoading();
        });
    };
});

3. 结合iframe的load事件（关键！） #

因为你加载的是iframe，它是一个独立的文档，所以必须等iframe自己的内容完全加载完成，再结合AngularJS的渲染完成事件。如果是动态创建iframe，可以这么写：

app.controller('YourController', function($timeout) {
    $scope.openIframe = function() {
        ShowLoading();
        
        var iframe = document.createElement('iframe');
        iframe.src = '你的iframe地址';
        // 监听iframe的load事件
        iframe.onload = function() {
            // 再用$timeout确保Angular这边的组件也渲染完毕
            $timeout(function() {
                HideLoading();
            });
        };
        document.body.appendChild(iframe);
    };
});

如果是页面上静态的iframe，就获取元素绑定事件：

app.controller('YourController', function($timeout) {
    var iframe = document.getElementById('your-iframe-id');
    iframe.addEventListener('load', function() {
        $timeout(function() {
            HideLoading();
        });
    });
});

4. 自定义指令监听特定组件渲染完成 #

如果是某个特定的AngularJS组件渲染完成后才要隐藏动画，可以写一个简单的指令，利用指令的post-link阶段（这个阶段子元素都已经编译渲染完成）：

app.directive('onRenderComplete', function($timeout) {
    return {
        link: function(scope, element, attrs) {
            $timeout(function() {
                // 此时该元素及其子组件都已渲染完成
                HideLoading();
            });
        }
    };
});

然后在对应的组件元素上加上这个指令：

<div your-component on-render-complete></div>

总结一下： #

• 如果是路由视图切换加载内容：用$viewContentLoaded
• 通用场景（不确定具体组件）：用$timeout
• 涉及iframe：必须结合iframe的load事件 + $timeout
• 特定组件渲染完成：用自定义指令

内容的提问来源于stack exchange，提问作者R.O.