javascript - Angular.js 在 DOM 准备好之前显示加载动画

Question

我正在使用 Angular.js 构建一个 Phonegap 应用程序。在索引页面中，您可以单击“显示用户列表”按钮，该按钮会将您重定向到一个在 ng-view 中加载模板的页面。该模板包含用户列表，这些用户列表从 $rootScope.users 加载并使用 ng-repeat 呈现。问题是有很多用户(目前大约有120个)所以页面渲染很慢，尤其是在Phonegap中。因此，当我点击“显示用户列表”按钮时，地址栏中的 URL 立即发生变化，但 ng-view 中的内容仅在几秒钟后发生变化。因此，我想在呈现 View 之前显示加载动画，以便用户知道页面正在加载。

我创建了一个加载动画 - 一个带有 ng-show="loading.visible" 的 div。在按钮上，我设置了 ng-click="loading.visible=true" 并在我写的“用户”页面的 Controller 中:

angular.element(document).ready(function(){
            $scope.loading.visible = false;
        })

第一次按下按钮时效果很好。动画立即显示并在用户列表显示时消失。但是当我返回到索引页面并再次按下“显示用户列表”按钮时，加载动画直到用户列表呈现后才显示，然后它显示了大约 100 毫秒然后消失了。

我是 Angular 的新手，所以我不太确定它是如何工作的，有人能告诉我哪里出了问题吗？是否有更好的解决方案来处理这个问题？谢谢

Answer 1

尝试在你的页面 Controller 中使用 below

$scope.$on('$viewContentLoaded', function () 
{
     $scope.loading.visible = false;
});

代替

angular.element(document).ready(function(){});

也可以在 Angular 文档中查找 ng-cloak。

希望这对您有所帮助。

谢谢