Question

我有一个div层，可以从服务器动态加载html-partials。单击导航中的链接时，模板变量会更改。

<div id="ajaxwrapper" ng-include="template">
</div>

这很好用。但模板需要很短的时间来加载，在此期间用户不会得到任何类型的响应。这就是为什么我想在模板加载之前显示一个微调器。可悲的是，我不知道如何。

我的链接看起来像这样：

<a ng-click="navi($event)" href="www.someurl.de">Text</a>

navi-function看起来像这样：

 $scope.navi = function (elem) {
    elem.preventDefault();
    var urlstring = "";
    if (typeof elem.target.href !== 'undefined') {
        urlstring = elem.target.href;
        $location.path(elem.target.pathname).search({ knt: $scope.aktuellesVertragskonto.nr });;
    } else {
        urlstring = elem.target.baseURI
        $location.path("/");
    }
    $scope.template = $location.absUrl();
};

我需要一些关于如何实现微调器的指针。谢谢:)）

spinner-template看起来像这样：

<script type="text/ng-template" id="loader">
<div class="text-center">
    <img src="~/images/spinner/ajax-loader.gif" /><br />
    Loading
</div>

Answer 1

ng-include指令包含onload表达式（reference），因此您可以执行以下操作：

<div id="ajaxwrapper" 
     ng-show="loaded"
     ng-include="template" onload="loaded = true">
</div>

<div class="text-center"
     ng-hide="loaded">
    <img src="~/images/spinner/ajax-loader.gif" /><br />
    Loading
</div>

Answer 2

还有另一种方法，因为div html中的ng-include覆盖使您可以显示加载器，直到模板加载为止。

您可以按如下所示将loader放入div中。

<div id="ajaxwrapper" ng-include="template">
  // Show loader image or css
</div>

如何在ng-include完全加载之前添加Spinner-Gif

2 个答案: