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

Question

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

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

这工作正常。但模板需要很短的时间才能加载，在此期间用户不会得到任何响应。这就是为什么我要显示一个微调，直到模板加载。可悲的是我不知道如何。

我的链接看起来是这样的：

<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>