AngularJs 完成渲染答案

【问题标题】：AngularJs on finished renderingAngularJs 完成渲染
【发布时间】：2023-03-17 20:02:01
【问题描述】：

我尝试了几个小时，但完全没有运气。我有一个 angularjs 应用程序，只要页面未完全加载（渲染），我想向用户展示加载微调器。特别是在状态变化之间，因为点击已注册，但没有立即发生。因此，如果实际加载与否，用户不会得到任何反馈。当控制器被执行时，我的应用程序正在通过 ajax 请求一些数据。我已经尝试过不同的解决方案：

使用$stateChangeStart 和$viewContentLoaded。如果第一次加载视图，这种方法确实可以正常工作，但是对于每个后续状态更改来说都过早触发。这与模板的缓存有关。每次触发 viewContentLoaded 时，都会缓存模板。
使用带有$timeout 的指令。如果我将它附加到我的 html 文档的body，这在第一次加载时效果很好。但是由于我使用的是嵌套视图/控制器，因此当我在状态之间切换时不会再次调用该指令。当我将指令附加到ui-viewelement 时，它再次被提前触发。

还有其他选择吗？难道我做错了什么？甚至可能吗？

谢谢

【问题讨论】：

你能分享一下你的问题吗
你究竟在哪里加载数据？
我在控制器执行时加载数据。问题是加载是一个异步调用，一旦控制器完成执行，指令就会被调用，这并不意味着数据实际上已经存在。我将尝试让一个示例正常工作。

标签： javascript angularjs angular-ui-router

【解决方案1】：

您是否尝试过使用resolve 对象？

您可以使用 resolve 为您的控制器提供状态自定义的内容或数据。 resolve 是一个可选的依赖映射，应该注入到控制器中。

https://github.com/angular-ui/ui-router/wiki#resolve

使用resolve 允许您在控制器初始化之前获取数据。这样，当您的控制器执行并触发 $viewContentLoaded 时，您可以确保您的数据可用：

$stateProvider.state('myState', {
    templateUrl: 'template.html',
    controller: function($scope, myData){
        $scope.myData = myData;
    },
    resolve:{
        myData:  function($http){
            return $http({method: 'GET', url: '/myUrl'})
                .then (function (data) {
                    return doSomeStuffFirst(data);
                }
            );
        }
    }
});

我敢打赌，当使用 resolve 和您的第一个选项（使用 $routeChangeStart 和 $viewContentLoaded 设置和移除您的微调器）时，事情会比现在好得多。

【讨论】：

【解决方案2】：

在您希望微调器显示的 web 应用中创建一个 div。

使用 ng-show="loading"

在您的请求之前设置 $scope.loading = true;然后创建一个 AngularJS 承诺（使用 .then() 或 .finally()）并在这个 .finally() 中放入 $scope.loading = false;

这样，它会在加载时显示您的微调器，当它最终完成时，它会将其设置为 false，从而使其不显示。

【讨论】：

我知道如何为一个 ajax 请求做到这一点。我要问的问题是是否可以对整个页面执行此操作。因此，当 angularjs 完成工作/渲染 DOM 时
$scope.$on('$viewContentLoaded', function(){ //Here your view content is fully loaded !! }); 或者使用 data-ng-init="loaded" 怎么样？
已经尝试过$viewContentLoaded，如上所述。开得太早了。编辑：应该重申。它确实是第一次工作，但随后的每一次状态变化都会导致它提前触发。
以 GIST 或其他方式将您的代码发送给我。到时候我得亲眼看看。
感谢您的提议，但遗憾的是这是不可能的。我目前的解决方案是每次触发 $viewContentLoaded 时清除模板缓存。

【解决方案3】：

看看angular-block-ui，这是一个负责显示加载指示器的模块。可以在整个页面或单个元素上进行阻止。它在后台监控 http 请求并确定一个块是否应该处于活动状态（它忽略缓存的 http 请求）。

【讨论】：

【解决方案4】：

为了某人。

<div style="visibility: hidden;">
    {{MyVarAfterLoad = true}}
</div>

【讨论】：