使用.then等待ajax响应的AngularJS无法按预期工作

Question

在我的应用程序中，我想检查用户是否已登录，因此我可以启用或禁用菜单中的按钮。我可以用一种简单的方式做到这一点，但后来我遇到一个问题，菜单会“闪烁”，用户会看到一些菜单项，直到从ajax响应。

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  $http.get('api/users/userLoggedIn').then(function(data){
        console.log(data);
        $scope.userLoggedIn = data;
    });
});

这就是我想出来的，如果我提供文档。然后在我的页面加载之前做出承诺并等待来自ajax调用的响应，但那不是发生的事情，“眨眼”仍然是hapening。

任何想法如何解决这个问题？

Answer 1

您应该隐藏所有菜单项，然后在响应回来后显示它们。

然后你可以在调用发生时加载一个加载器gif。关于here

的帖子很棒

那么用户将会看到一个带有加载程序gif的空白菜单，然后一旦响应返回，将显示正确的菜单项。

空白内容+加载程序gif通常是如何解决此问题的，因为它优于FOUC（非样式内容的闪存）

希望这有帮助。