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

Question

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

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

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

我的 link 看起来像这样：

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

导航功能如下所示：

 $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();
};

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

微调模板看起来像这样：

<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

还有另一种方法，因为 ng-include override inside div html 所以你可以显示加载器直到模板加载。

你可以把 loader 放在 div 里面，如下所示。

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

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

How to add Spinner-Gif before ng-include is fully loaded

ajax

spinner

angularjs