Question

我创建了一个预加载器，在第一次加载页面时工作正常： http://vivule.ee/1

但是，在页面内导航时，加载程序无法正常工作。使用FF时，您可以很好地看到这一点。它只是显示空背景而不是加载器。我正在使用ng-cloak，没有它，而不是空背景，它会显示内容加载标记{{}}。

我的加载程序如下工作 - 显示加载器直到加载内容，然后使用ng-hide隐藏加载程序。我可以代替使用ng-hide，以某种方式监听ng-cloak，就像激活ng-cloak时显示加载器一样，当加载内容时它会隐藏它，因为现在ng-clock似乎在加载之前加载了。

对不起，如果问题太混乱：/

PS！要在页面内导航，请向下滚动到类似的游戏，然后单击一个。

Answer 1

我无法使用ng-cloak解决问题，而是我这样做了 - 默认情况下，页面上会显示加载程序。当角度加载数据时，我发送jquery命令来隐藏加载器（这在myapp.controller中完成）。当我在页面内导航时，我用jquery取消隐藏加载程序（代码再次出现在myapp.controller中） - 注意！在加载新页面之前我取消隐藏它。

使用简单的display：none和display：block（使用jquery click取消隐藏）来隐藏和取消隐藏。

    $(".single_similar_game_container").click(function(e) {
        if (e.button == 0) {
            $("#spinner_bg").css("display", "block");
        }
    });

Answer 2

请注意，您可以覆盖Angular的CSS类并使用ng-cloak类来显示页面元素。例如：

body div.wrap.ng-cloak div.preloader { display: block !important; }
body div.wrap.ng-cloak div:not(.preloader) { display: none!important; }

AngularJS - 显示预加载器而不是ng-cloak

2 个答案: