Question

我正在使用Angular.js构建一个Phonegap应用程序。在索引页面中，您可以单击＆＃34;显示用户列表＆＃34;按钮，将您重定向到在ng-view中加载模板的页面。该模板包含用户列表，这些用户从$rootScope.users加载并使用ng-repeat呈现。问题是有很多用户（现在大约120个），因此页面渲染速度很慢，尤其是在Phonegap中。所以，当我点击＆＃34;显示用户列表＆＃34;按钮，地址栏中的URL会立即更改，但ng-view中的内容只会在几秒钟后更改。因此，我想显示加载动画，直到呈现视图，因此用户知道页面正在加载。

我创建了一个加载动画 - 一个带ng-show="loading.visible"的div。在按钮上，我设置ng-click="loading.visible=true"并在＆＃34;用户＆＃34;的控制器中我写的页面：

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

第一次按下按钮时效果很好。动画立即显示，并在用户列表显示时消失。但是当我回到索引页面时，按下＆＃34;显示用户列表＆＃34;再次按下按钮，加载动画在呈现用户列表之前不会显示，然后显示大约100毫秒并消失。

我是Angular的新手，所以我不确定它是如何工作的，有人可以告诉我什么是错的，是否有更好的解决方案来处理这个问题？感谢

Answer 1

尝试在页面控制器中使用以下内容

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

而不是

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

还要在角度文档中查找ng-cloak。

希望这有帮助。

由于

Angular.js显示加载动画，直到DOM准备就绪

1 个答案: